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.
Related Posts:
How to Scroll Top or Bottom of Document Using JavaScript
How to Create Table of Contents Using JavaScript
How to Select Document Elements Using JavaScript?
How to Show Pop Up Window Using JavaScript
How to go Back Browsing History Using JavaScript
How to Click Button Using JavaScript?
How to Write JavaScript Function as URL in Hyperlink?
How to use Round, Random, Min and Max in JavaScript
How to Concatenate, Join and Sort Array in JavaScript?
How to Loop Through JavaScript Array?
How to Loop using JavaScript?
How to Show Pop Up Boxes Using JavaScript?
How to Write Conditional Statements in JavaScript?
How to Write JavaScript With HTML?
How to create Changeable Date and Time Using JavaScript?
How to Validate a HTML Form Using JavaScript?
How to create a simple form using HTML?
How to Create JavaScript Image Sideshow with Links
How to Display Date Format in JavaScript?
How to Validate a HTML Form Using JavaScript?
What are the Different Ways to Redirect Page in JavaScript?
How to create Timer Using JavaScript?
How to Alter HTML Document Structure using jQuery?
Reviewed by Unknown
on
9:40 م
Rating:
ليست هناك تعليقات: