JQuery DOM node insertion method summary

Summary of Jquery's dynamic insertion of DOM nodes:

Append ()

Append content to each matching element:
HTML code:
<P> I want to say: </p>
JQuery code:

$ ("P"). append ("<B> Hello </B> ");

Result:
<P> I want to say: <B> Hello </B> </p>

AppendTo ()

Append all matched elements to the specified element. In fact, this method is used to reverse the conventional $ (A). append (B) operation, that is, not to append B to A, but to append A to B:
HTML code:
<P> I want to say: </p>
JQuer code:

$ ("<B> Hello </B>"). appendTo ("p ");

Result:
<P> I want to say: <B> Hello </B> </p>

Prepend ()

To the internal content of each matching element:
HTML code:
<P> I want to say: </p>
JQuer code:

$ ("P"). prepend <"<B> Hello </B> ");

Result:
<P> <B> Hello </B> I want to say: </p>

PrependTo ()

Forward all matched elements to the specified element. In fact, this method is used to reverse the conventional $ (A). prepend (B) operation, that is, not to forward B to A, but to B:
HTML code:
<P> I want to say: </p>
JQuer code:

$ ("<B> Hello </B>"). prependTo ("p ");

Result:
<P> <B> Hello </B> I want to say: </p>

After ()

Insert the following content after each matching element:
HTML code:
<P> I want to say: </p>
JQuer code:

$ ("P"). after ("<B> Hello </B> ");

Result:
<P> I want to say: </p> <B> Hello </B>

InsertAfler ()

Insert all matched elements to the end of the specified element. In fact, this method is used to reverse the regular $ (A). after (B) operation, that is, not to insert B to A, but to insert A to B:
HTML code:
<P> I want to say: </p>
JQuer code:

$ ("<B> Hello </B>"). insertAfter ("p ");

Result:
<P> I want to say: </p> <B> Hello </B>

Before ()

Insert content before each matching element:
HTML code:
<P> I want to say: </p>
JQuer code:

$ ("P"). before ("<B> Hello </B> ");

Result:
<B> Hello </B> <p> I want to say: </p>

InsertBefore ()

Add all matched elements to the front of the specified element. In fact, this method is used to reverse the conventional $ (A). before (B) operation, that is, not to insert B to A, but to insert A to B:
HTML code:
<P> I want to say: </p>
JQuer code:

$ ("<B> Hello </B>"). insertBefore ("p ");

Result:
<B> Hello </B> <p> I want to say: </p>

These insert nodes can not only insert the newly created DOM elements into the document, but also move the original DOM elements. For example, you can use them to create and insert new elements:

$ (Function () {var $ li_1 = $ ("<li title = 'add node: Data structuring '> Add node: Data Structure </li> "); // create the first <li> element var $ li_2 = $ ("<li title = 'add node: Design mode'> Add node: Design mode' </li> "); // create the second <li> element var $ li_3 = $ ("<li title = 'add node: Computer algorithmic '> Add node: Computer Algorithm </li> "); // create the third <li> element var $ parent = $ (". nm_ul "); // obtain the <ul> node. <Li> parent node var $ two_li = $ (". nm_ul li: eq (1) "); // obtain the second <li> element node in the <ul> node $ (" # btn_1 "). click (function () {$ parent. append ($ li_1); // Add it to the <ul> node to display it on the webpage}); $ ("# btn_2 "). click (function () {// you can use the chained method: $ parent. append ($ li_1 ). append ($ li_2); $ parent. append ($ li_2) ;}); $ ("# btn_3 "). click (function () {// The insertAfter method inserts the third <li> element to the obtained <li> element $ li_3.insertAfter ($ two_li );});});

They are also used to move the original DOM elements:

$ (Function () {var $ one_li = $ ("ul li: eq (1 )"); // obtain the second <li> element node var $ two_li = $ ("ul li: eq (2)") in the <ul> node )"); // obtain the third <li> element node $ two_li.insertBefore ($ one_li) in the <ul> node; // mobile node });

Articles you may be interested in

• JQuery DOM node insertion method summary
• Insert a node before the current jquery Node
• Javascript restricts that only numbers (including decimal places) can be entered in the text box)
• JavaScript deletes a DOM Node
• Summary of jquery's method for moving dom nodes
• How does jquery bind events to dynamically created nodes?
• MySQL large data volume quick insert method and statement Performance Optimization
• Js restrictions: Only English letters and numbers can be entered. Chinese characters and other special characters cannot be entered.