DOM navigation and manipulation using standard JavaScript requires a bit more work than using the jQuery methods. We will take a look at the more common methods in this article.

Methods

The methods listed in the following table are commonly used for DOM manipulation.

HTML Example

We will use the following HTML for the examples listed below.

Examples

Here you can see various DOM manipulation methods below. You will note that some of the methods below produce the same results. However, while that is the case, some methods may have more flexibility with regard to passing additional parameters. For detailed information about each method, you may want to visit jQuery.com.

.after()

.append()

.appendTo()

.attr()

.before()

.detach()

.empty()

.html()

.insertAfter()

.insertBefore()

.prepend()

.prependTo()

.remove()

.removeAttr()

.replaceAll()

.replaceWith()

.text()