Manipulate the DOM in jQuery

jQuery provides methods to manipulate the DOM in an extremely efficient way. You do not need to write code that is too long to modify the attribute value of any element or to extract HTML code from a p or div tag.

jQuery provides methods like.attr (), .html (), .val () to retrieve information from DOM elements for later use.

Manipulate content in jQuery

The html () method takes the html content (inside the HTML) of the first matched element.

Here is the syntax of the .html () method:

 selector .html( )

For example

The following simple example uses the .html () and .text (val) methods. In it, .html () obtains the HTML content from the object and then the .text (val) method sets the value of the object using the passed parameter.

 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

4 ★ | 1 Vote

May be interested

  • How to Use jQuery on Your WebsiteHow to Use jQuery on Your Website
    jquery is the most popular javascript language by far, used by many popular websites across the internet. however, since it is a library, it is not a part of unaltered javascript. how, then, can you use jquery on your website? the process...
  • jQuery AjaxjQuery Ajax
    ajax stands for asynchronous javascript and xml and this technology helps us to download data from the server without refreshing the browser.
  • Tooltip creation tools are useful for jQueryTooltip creation tools are useful for jQuery
    tooltip is a tool that displays a caption for an image or a piece of text when moving the cursor to that text or image. the following article will list useful tooltip creation tools with jquery!
  • Select blocks of text and manipulate blocks in WordSelect blocks of text and manipulate blocks in Word
    instructions on how to select text blocks and manipulate blocks in word. to change the text display mode you do the following: 1. select the text block. 1.1 choose a block as 1 word. to select a word, double-click the desired word.
  • Psychological tricks that scammers often usePsychological tricks that scammers often use
    in the heat of the moment, you are vulnerable to manipulation and if you accidentally associate with a scammer, you will likely experience one or more of the psychological tricks the scammer uses to catch you off guard.
  • Summary of 50 most popular Ctrl-using shortcuts in ExcelSummary of 50 most popular Ctrl-using shortcuts in Excel
    using the ctrl shortcut in excel helps users to manipulate data faster and more professionally. the following article tipsmake will send you a summary of 50 excel shortcuts to manipulate ctrl.
  • Replacement operations for home button on iPhone XS, and iPhone XS MaxReplacement operations for home button on iPhone XS, and iPhone XS Max
    you may be wondering about the round home button, one of the features that made the brand of iphone and ios lines has been omitted, so the interesting features associated with this home button will now be implemented. star?
  • Lightroom keyboard shortcuts - All Adobe Lightroom keyboard shortcuts to useLightroom keyboard shortcuts - All Adobe Lightroom keyboard shortcuts to use
    in lightroom there are many different features so we manipulate it manually will take time. because of that, the manufacturer they provide shortcuts so you can manipulate faster and work more efficiently. software tips will introduce you to the shortcuts in adobe lightroom.
  • Working with File in PythonWorking with File in Python
    in this article, we will work with you to learn about file operations in python. more specifically, how to open files, read files, write to files, close files, and methods to work with files you should know. let's watch.
  • What is JavaScript? Can the Internet exist without JavaScript?What is JavaScript?  Can the Internet exist without JavaScript?
    not everyone knows what javascript is and how it works. the long and fascinating development history of javascript as well as what we can do with javascript is still unknown.