How to Alter HTML Document Structure using jQuery?

HTML documents are represented as a tree of nodes rather than a linear sequence of characters, 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 number of method in jQuery for inserting and replacing elements, copying elements, wrapping elements and deleting elements. For insertion and replacement of elements in HTML document, 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.

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.

The inserting can be made into or before or after or in place of each selected elements. If the content to be inserted is an element that already exists in the document, it is moved from current location.

The append() method inserts an element at the end of selected element, prepend() method inserts an element at start of 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.

There are before() and after() methods, which can be used to insert before and after of each selected elements. For before() and after() the function is invoked with no second argument.

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.

Similary, you can use appendTo(), prependTo(), insertAfter(), insertBefore and replaceAll() methods for the same purpose as given in the example 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/>

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. clone() makes and returns a copy of each selected element and all the descendent's of those elements.

An example for copying elements using clone() method is given below.

$(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. jQuery defines three wrapping functions, wrap() wraps each of the selected elements, wrapInner() 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. remove() 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 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.