How to Alter HTML Document Structure using jQuery?

We can represent HTML documents as a tree of nodes rather than a linear sequence of characters. Altering the HTML document structure such as Insertions, deletions, and replacements are not as simple as they are for strings and arrays. In jQuery, there are some methods for making more complex changes to a document.

There are a number of methods in jQuery for inserting and replacing elements, copying elements, wrapping elements and deleting elements. For insertion and replacement of elements in HTML document structure, you can use the methods append(), prepend() and replacewith().

You can copy HTML elements using clone() method and wrapp the elements using wrap(), wrapInner() and wrapAll() methods. For deletion of the element you can use empty(), reomve() and unwrap() methods. 

Read Also: How to Use jQuery With HTML?

How to Insert and Replace Elements using jQuery 

You can use different methods to insert and replace elements using jQuery. Each of the methods takes an argument that specifies the content that is to be inserted into the document. We can insert our desired contents into or before or after or in place of each selected element. If the content to be inserted is an element that already exists in the document, it is moved from the current location.

The append() method inserts an element at the end of the selected element. Similarly, prepend() method inserts an element at the start of the selected element and replaceWith() method replaces one selected element with another. For append(), prepend() and replacewith() the second argument is the current content of the element as an HTML string.

You can use before() and after() methods to insert before and after each selected element. The function will invoke with no second argument for these methods.

Here are some examples of jQuery codes for inserting and replacing elements using jQuery.

$("#clr").append("<br/>"+message); 
// It adds a content at end of the #clr element
$("h1").prepend(":"); 
// It adds colon sign at the star of each <h1>
$("h1").before("<hr/>");
// It insert horizontal line before each <h1> element
$("h1").after("<hr/>");
// It insert horizontal line after each <h1> element
$("hr").replaceWidth("<br/>");
// It replaces <hr/> elements with <br/>
$("h2").each(function(){
var h2=$(this);
h2.replaceWith("<h1>"+h2.html()+"</h1>");
});
// It replaces <h2> with <h1> keeping the content.

Similarly, you can use appendTo(), prependTo(), insertAfter(), insertBefore and replaceAll() methods for the same purpose as given in the example given below.

$("<br/>"+message).appendTo("#clr"); 
// It adds a content at end of the #clr element
$(document.createTextNode(":")).prependTo("h1"); 
// It adds colon sign at the star of each <h1>
$("<hr/>").insertBefore("h1");
// It insert horizontal line before each <h1> element
$("<hr/>").insertAfter("h1");
// It insert horizontal line after each <h1> element
$("<br/>").replaceAll("hr");
// It replaces <hr/> elements with <br/>

Read Also: How to Get and Set Element Attributes using jQuery

How to Copy Elements using jQuery 

If you insert elements that are already part of the document, those elements will simply be moved, not copied to their new location.

If you want to copy elements to a new location instead of moving them, you must first make a copy with the clone() method. It makes and returns a copy of each selected element and all the descendent’s of those elements.

Here is an example of copying elements using the clone() method.

$(document.body).append("<div id="linklist"><h1>List of Links</h1></div>");
//It appends a new div with id "linklist", to the end of the document
$("a").clone().appendTo("#linklist");
//It copy all links in the document and insert them into that new div
$("#linklist>a").after("<br/>");
//It insert <br/> elements after each link so they display on separate lines

How to Wrap Elements using jQuery 

Another type of insertion into an HTML document involves wrapping a new element or elements around one or more elements. Since, jQuery defines three wrapping functions, wrap() function wraps each of the selected elements. The wrapInner() function wraps the contents of each selected element and wrapAll() wraps the selected elements as a group.

$("h1").wrap(document.createElement("i"));
//It produces <i><h1> .....</h1></i>
$("h1").wrapInner("<i/>");
//It produces <h1><i>........</i></h1>
$("body>p:first").wrap("<a name="lead"><div class="first"></div></a>");
// It wraps the first paragraph in one anchor and div
$("body>p:not(:first)").wrapAll("<div class="rest"></div>");
//It wraps all the other paragraps in another div

How to Delete Elements using jQuery 

Along with insertions and replacements, jQuery also defines methods for deleting elements. empty() removes all children including text nodes or each of the selected elements, without altering the elements themselves. The remove() method, by contrast, removes the selected elements and all their content from the document. This method is normally invoked with no arguments and removes all elements in the jQuery object.

 $("#hide").empty();
// It removes all the contents having id #hide
$("#rmv").remove(); 
// It removes the contents and events having id #rmv

You can use the unwrap() method to perform element removal in a way that is the opposite of the wrap() or wrapAll() method. It removes the parent element of each selected element without affecting the selected elements or their siblings.

Read Next: How to Create Animated Visual Effects Using jQuery