JQuery DOM node insertion method summary

Dynamic HTML element creation is not actually useful. You also need to insert the newly created element into the document. The easiest way to insert a newly created node into a document is to make it a subnode of a node in this document. The append () method is used to insert a node. It appends new content to the element.

There are not only one method to insert a file to a newly created node. In JQuery, there are also other methods to insert nodes, as shown in the following table. You can flexibly make multiple choices based on your actual needs.

Assume that there is a document. The html dom structure is as follows:

<P class = "nm_p" title = "welcome to the php programmer's note Website"> welcome to the php programmer's note website </p> <ul class = "nm_ul"> <li title = 'php'> simple and easy-to-understand PHP materials </li> <li title = 'javascript '> simple and easy-to-understand JavaScript materials </li> <li title = 'jquery'> simple and easy-to-understand JQuery materials </li> </ul>

Jquery inserts elements into this document using the following methods:

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>: </p>

HTML code: <p> I want to say: </p> jQuer code: $ ("p "). prepend <"<B> Hello </B>"); Result: <p> <B> Hello </B>: </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> "). 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>

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>

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 deletes a DOM Node
• Javascript restricts that only numbers (including decimal places) can be entered in the text box)
• MySQL large data volume quick insert method and statement Performance Optimization
• Summary of jquery's method for moving dom nodes
• How does jquery bind events to dynamically created nodes?
• Js restrictions: Only English letters and numbers can be entered. Chinese characters and other special characters cannot be entered.