This ASP.NET 4.0 tutorial explains how to use jQuery to manipulate the DOM elements.
Web developer can manipulate the DOM, by modifying object of the page. He/she can add or remove the element; add, modify, or remove an attribute; and so on. For example the code:
$(“#tree li:first > ul”).append($(“<li>”).html(“last node”));
retrieves the element to which the new element must be added. First the query gets the tree element; then it takes the first li children and goes to the ul direct child. After retrieving the treeview node, Web developer uses the append method to add a DOM element. The append method accepts a parameter that contains a jQuery object containing one or more DOM elements. A new jQuery object is built with a li tag and is set the inner HTML coding to last node. Note: The <tag> syntax is special syntax that tells the $ method that although Web developer’s passing a string, he/she doesn’t need to issue a query; rather he/she’s just creating an object with this tag.
Web developer can follow the opposite approach: create the new object and append it to the treeview element. In this case he/she has to use appendTo method:
$(“<li>”).html(“last node”).appendTo($(“#tree li:first > ul”));
When Web developer has to remove the element he/she has to retrieve the element through a query and then invoke the remove method:
$(“#tree li:first > ul > li:last”).remove();
