Home > Developer > Web Develop
To make the page more intelligent, sometimes we want to dynamically add an element tag on the HTML structure page, so the first thing to do before inserting is to create the node.
var box=$ ('<div id= ' box > Node </div>'// Create a node $ ('body'// Insert the node inside the <body> elementIn the process of creating a node, we have actually demonstrated how to insert a node by using the. Append () method. But apart from this method, JQuery provides several other ways to insert nodes.
$('Div'). Append ('<strong> Nodes </strong>');//Insert the strong node inside the DIV$('Div'). Append (function (index,html) {//inserting nodes using anonymous functions, HTML is the original node return '<strong> Nodes </strong>';}); $('span'). AppendTo ('Div');//talk about span nodes moving into div nodes$('span'). AppendTo ($ ('Div'));//Ibid .$('Div'). Prepend ('<span> Nodes </span>');//inserts a span in front of the div interior$('Div'). Append (function (index,html) {//using anonymous functions, Ibid. return '<span> Nodes </span>'; }); $('span'). Prependto ('Div');//move a span in front of the div interior$('span'). Prependto ($ ('Div'));//Ibid .
$('Div'). After ('<span> Nodes </span>');//insert to the DIV's sibling node afterSpan $ ('Div'). After (function (index,html) {//using anonymous functions, Ibid. return'<span> Nodes </span>'; }); $('Div'). Before ('<span> Nodes </span>');//insert span before the DIV's sibling node$('Div'). Before (function (index,html) {//using anonymous functions, Ibid. return'<span> Nodes </span>'; }); $('span'). InsertAfter ('Div');//move the span element behind the DIV element$('span'). InsertBefore ('Div');//move the span element to the front of the DIV elementThree Parcel nodes
JQuery provides a series of methods for wrapping nodes, what does the parcel node mean? is actually using string code to include the code of the specified element.
$('Div'). Wrap ('<strong></strong>');//wrap a layer of strong in the DIV envelope$('Div'). Wrap ('<strong>123</strong>');//the elements of the package can be packed with content$('Div'). Wrap ('<strong><em></em></strong>');//Wrapping multiple Elements$('Div'). Wrap ($ ('Strong').Get(0));//You can also wrap a native DOM$('Div'). Wrap (Document.createelement ('Strong'));//Temporary native DOM$('Div'). Wrap (function (index) {//Anonymous Functions return '<strong></strong>'; }); $('Div'). Unwrap ();//remove a layer of package content, multiple removal times required$('Div'). Wrapall ('<strong></strong>');//all div is covered with only one layer of strong$('Div'). Wrapall ($ ('Strong').Get(0));//Ibid .$('Div'). Wrapinner ('<strong></strong>');//Wrapping child element content$('Div'). Wrapinner ($ ('Strong').Get(0));//DOM Node$('Div'). Wrapinner (function () {//Anonymous Functions return '<strong></strong>'; });
Note: The difference between. Wrap () and. Wrapall () is that each element is treated as a separate body, containing a layer of outer layers respectively, which takes all elements as a whole as a single body, containing only one layer of outer layers. Both of these are contained in the outer layer, while. Wrapinner () is contained within the inner layers.
Four Node operationsIn addition to creating, inserting, and wrapping nodes, JQuery provides some common methods for node operations: copying, replacing, and deleting nodes.
//Replication Nodes$('Body'). Append ($ ('Div'). Clone (true));//Copy a node to add to HTMLNote: Clone (trueThe parameter can be empty, which means that only elements and content are copied, and the event behavior is not copied. and addtrueparameter, the event handling behavior that accompanies this element is also duplicated. //Delete a node$('Div'). Remove ();//Delete div element directlyNote: When the. Remove () parameter is removed, the element specified by the preceding object selector is deleted. The. Remove () capability can also take a selector parameter, for example: $ ('Div'). Remove ('#box'); Delete Id= onlyBox's Div. //Delete node for reserved events$('Div'). Detach ();//preserving the deletion of event behaviorNote: the. Remove () and. Detach () are both delete nodes, and after the deletion itself the method can return the currently deleted node object, but the difference is that the former does not preserve the event behavior while recovering, while the latter retains it. //emptying Nodes$('Div'). empty ();//Delete the contents of the node//Replace node$('Div'). ReplaceWith ('<span> Nodes </span>');//Replace a div with a SPAN element$('<span> Nodes </span>'). ReplaceAll ('Div');//Ibid .
Note: When a node is replaced, the event behavior that it contains disappears.
JQuery DOM node operation
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
