selector .html( )

 The jQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" language = "javascript" > $ ( document ). ready ( function () { $ ( "div" ). click ( function () { var content = $ ( this ). html (); $ ( "#result" ). text ( content ); }); }); 

 Click on the square below:  id = "result" >  id = "division" style = " background - color : blue ; " > This is Blue Square!! 

Replace the DOM element in jQuery

You can completely replace a DOM element with defined HTML or DOM elements. The replaceWith (content) method accomplishes this purpose very effectively.

The following is the syntax:

 selector .replaceWith( content )

Here, content is what you want to replace the original element. It could be HTML or text.

For example

The following simple example will replace the div element with "

JQuery is Great

":

 The jQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" language = "javascript" > $ ( document ). ready ( function () { $ ( "div" ). click ( function () { $ ( this ). replaceWith ( " 

JQuery is Great

 " ); }); }); 

 Click on the square below:  id = "result" >  id = "division" style = " background - color : blue ; " > This is Blue Square!! 

Remove the DOM elements in jQuery

There may be a situation when you want to remove one or more DOM elements from the document. jQuery provides two methods to handle this situation:

The empty () method removes all child nodes from the matching set of elements, while the remove (expr) method removes all matching elements from the DOM.

Here is the syntax:

 selector .remove( [ expr ]) or selector .empty( )

You can pass arbitrary expr parameters to filter the set of elements to remove.

For example

In a simple example, elements are removed as soon as they are clicked:

 The jQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" language = "javascript" > $ ( document ). ready ( function () { $ ( "div" ). click ( function () { $ ( this ). remove ( ); }); }); 

 Click on any square below:  id = "result" >  class = "div" style = " background - color : blue ; " >  class = "div" style = " background - color : green ; " >  class = "div" style = " background - color : red ; " > 

Insert DOM elements in jQuery

There may be situations when you want to insert one or more new DOM elements into your existing document. jQuery provides a variety of methods to insert elements into different locations.

The after (content) method inserts the content after each matched element, while the before (content) method inserts content before each matched element.

Here is the syntax of methods:

 selector .after( content ) or selector .before( content )

Here, content is what you want to insert. It could be HTML or text.

For example

In the following example, div elements are inserted immediately before the clicked element:

 The jQuery Example  type = "text/javascript" src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >  type = "text/javascript" language = "javascript" > $ ( document ). ready ( function () { $ ( "div" ). click ( function () { $ ( this ). before ( ' 

 ' ); }); }); 

 Click on any square below:  id = "result" >  class = "div" style = " background - color : blue ; " >  class = "div" style = " background - color : green ; " >  class = "div" style = " background - color : red ; " > 

Methods of manipulating DOM in jQuery

The following lists all the methods that you can use to manipulate DOM elements:

Formula & Description1 after (content)

Insert content after each matched element

2 append (content)

Add content to within each matched element

3 appendTo (selector)

Append all matching elements to a different set of elements

4 before (content)

Insert content before each matched element

5 clone (bool)

Simulate matching DOM elements, and all of their Event Handlers, and select those simulations

6 clone ()

Simulate matching DOM elements and select those simulations

7 empty ()

Remove all child nodes from the set of matching elements

8 html (val)

Set the HTML content of each matched element

9 html ()

Get the HTML content (internal HTML) of the first matched element

10 insertAfter (selector)

Insert all matching elements after the set of other defined elements

11 insertBefore (selector)

Insert all matching elements before the set of other defined elements

12 prepend (content)

Add previous content to within each matched element

13 prependTo (selector)

In addition, all elements matched to the set of other defined elements

14 remove (expr)

Remove all matching elements from the DOM

15 replaceAll (selector)

Replace matching elements by the given Selector with matching elements

16 replaceWith (content)

Replace all elements that match the specified HTML or DOM elements

17 text (val)

Set the text contents of all matched elements

18 text ()

Get the combined text contents of all matching elements

19 wrap (elem)

Wrap each element that matches the specified element

20 wrap (html)

Wrap each element against the specified HTML content

21 wrapAll (elem)

Wrap all elements in the set that match into a single wrapper element (elem here is the DOM element)

22 wrapAll (html)

Wrap all elements in a matched set into a single wrapper element (html is an HTML element)

23 wrapInner (elem)

Wrap the sub content inside each matched element (including text nodes) with a DOM element

24 wrapInner (html)

Wrap sub content within each matched element (including text nodes) with an HTML structure

Follow tutorialspoint

Previous article: CSS Selector in jQuery

Next article: Event handling in jQuery

Kareem Winters

Update 25 May 2019