JQuery DOM Insert Node

//Append ()//append content to each matching element:HTML code:<p> I want to say:</p>jquery Code: $ ("P"). Append ("<b> Hello </b>"); Results:<p> I want to say:<b> Hello </b></p>//AppendTo ()//appends all matching elements to the specified element. In fact, using this method is reversed by the normal $ (A). Append (b) operation, that is, not appending B to a, but appending A to B:HTML code:<p> I want to say:</p>Jquer Code: $ ("<b> Hello </b>"). AppendTo ("P"); Results:<p> I want to say:<b> Hello </b></p>//prepend ()//Forward content to each matched element:HTML code:<p> I want to say:</p>Jquer Code: $ ("P") .prepend< "<b> Hello </b>"); Results:<p><b> Hello </b> i want to say:</p>//prependto ()//Place all matching elements in front of the specified element. In fact, using this method is reversed by the normal $ (A). Prepend (b) operation, that is, instead of placing B in front of a, instead of placing a in front of B:HTML code:<p> I want to say:</p>Jquer Code: $ ("<b> Hello </b>"). Prependto ("P"); Results:<p><b> Hello </b> i want to say:</p>//After ()//Insert the content after each matching Yenso:HTML code:<p> I want to say:</p>Jquer Code: $ ("P"). After ("<b> Hello </b>"); Results:<p> I want to say:</p><b> Hello </b>//Insertafler ()//inserts all matching elements behind the specified element. In fact, using this method reverses the usual $ (A). After (b) operation, that is, instead of inserting b behind a, insert a into the back of B:HTML code:<p> I want to say:</p>Jquer Code: $ ("<b> Hello </b>"). InsertAfter ("P"); Results:<p> I want to say:</p><b> Hello </b>//before ()//Insert the content before each matching element:HTML code:<p> I want to say:</p>Jquer Code: $ ("P"). Before ("<b> Hello </b>"); Results:<b> Hello </b><p> i want to say:</p>//insertbefore ()//stabs all matching elements into the front of the specified element. In fact, using this method is reversed by the normal $ (A). Before (b) operation, that is, instead of inserting b into front of a, insert a into front of B:HTML code:<p> I want to say:</p>Jquer Code: $ ("<b> Hello </b>"). InsertBefore ("P"); Results:<b> Hello </b><p> i want to say:</p>These methods of inserting nodes can not only insert newly created DOM elements into the document, but also move the original DOM elements. For example, use them to create a new element and insert it: $ (function(){    var$li _1 = $ ("<li title= ' new node: Data structure ' > new node: Data structure </li>");//Create the first <li> element    var$li _2 = $ ("<li title= ' new node: design mode ' > new node: design mode </li>");//Create a second <li> element    var$li _3 = $ ("<li title= ' new node: computer algorithm ' > new node: computer algorithm </li>");//Create a third <li> element    var$parent = $ (". Nm_ul");//gets the <ul> node. Parent node of <li>    var$two _li = $ (". Nm_ul li:eq (1)");//gets the second <li> element node in a <ul> node         $("#btn_1"). Click (function() {$parent. Append ($li _1); //Add to <ul> node so that it can be displayed in a Web page    }); $("#btn_2"). Click (function(){        //chained notation can be taken: $parent. Append ($li _1). Append ($li _2);$parent. Append ($li _2);         }); $("#btn_3"). Click (function(){        //The InsertAfter method inserts a third <li> element element created into the acquired <li>$li _3.insertafter ($two _li); });}); They are also used to move the original DOM elements: $ (function(){    var$one _li = $ ("ul Li:eq (1)");//get the second <li> element section of a <ul> node    var$two _li = $ ("ul Li:eq (2)");//get the third <li> element node in a <ul> node$two _li.insertbefore ($one _li);//Mobile Node});

JQuery DOM Insert Node