Manipulating DOM Elements

Adding, removing, copying DOM elements and related manipulations.

Create a DOM element

How to create a new element and attach it to the DOM tree.

jQuery: $(string)

Replace a DOM element

Remove an element from the DOM tree and insert a new one in its place.

jQuery: $.replaceAll(), $.replaceWith()

Unwrap a DOM element

Remove the parents of an element from the DOM, leaving the element's content in place.

jQuery: $.unwrap()

Empty an element's content

Remove all child nodes of an element from the DOM.

jQuery: $.empty()

Removing an element

Remove an element from the DOM tree.

jQuery: $.remove(), $.detach()

Insert an element after or before another

Insert an HTML structure after or before a given DOM tree element.

jQuery: $.after(), $.before(), $.insertAfter(), $.insertBefore

Get the text content of an element

Get the combined text contents of an element, including its descendants, or set the text content of the element.

jQuery: $.text()

Get and set the HTML content of an element

Read or write the HTML content of an element.

jQuery: $.html()

Append or prepend to an element

Insert a new element or an HTML structure to the end or the beginning of another element's content.

jQuery: $.append(), $.appendTo(), $.prepend(), $.prependTo()

Wrap an HTML structure around an element

How to use a given container as wrapper for another DOM element.

jQuery: $.wrap(), $.wrapAll()

Clone an element

Create a deep copy of a DOM element.

jQuery: $.clone()

Iterating over a list of selected elements

How to loop through a NodeList and do something with each element.

jQuery: $.each()