How jquery Inserts a DOM node _jquery

This example describes the way jquery inserts a DOM node. Share to everyone for your reference. The specific analysis is as follows:

Creating HTML elements Dynamically is not really useful, and you need to insert newly created elements into your document. The easiest way to insert a newly created node into a document is to make it a child of a node in this document. A method append () that inserts a node is used earlier, and it appends the newly created content inside the element.

There is not only one way to insert a newly created node into a document, but there are other ways of inserting nodes in jquery, as shown in the following table. Readers can flexibly make a variety of choices based on actual needs.

The HTML DOM structure is as follows:

<p class= "nm_p" title= "Welcome to Cloud Communities" > Welcome to Cloud-Habitat </p>
<ul class= "Nm_ul" >
  <li title= ' PHP programming ' > Easy to understand PHP programming </li>
  <li title= ' JavaScript programming ' > Easy to understand JavaScript programming </li>
  <li title= ' jquery programming ' > Easy to understand jquery programming </li>
</ul>

Append ()

Append content to each matching element:

HTML code:

Copy Code code as follows:

<p> I want to say:</p>

jquery Code:

Copy Code code as follows:

$ ("P"). Append ("<b> hello </b>");

Results:

Copy Code code as follows:

<p> I want to say hello,:<b> </b></p>

Appendto ()

Appends all matching elements to the specified element. In fact, using this method reverses the normal $ (A). Append (b) operation, that is, not appending B to a, but appending A to B:

HTML code:

Copy Code code as follows:

<p> I want to say:</p>

Jquer Code:

Copy Code code as follows:

$ ("<b> Hello </b>"). Appendto ("P");

Results:

Copy Code code as follows:

<p> I want to say hello,:<b> </b></p>

Prepend ()

Forward content to each matching element:

HTML code:

Copy Code code as follows:

<p> I want to say:</p>

Jquer Code:

Copy Code code as follows:

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

Results:

Copy Code code as follows:

<p><b> Hello </b> i want to say:</p>

Prependto ()

All matching elements are placed in front of the specified element. In fact, using this method reverses the normal $ (A). Prepend (b) operation, that is, not to place B in front of a, but to place A in front of B:

HTML code:

Copy Code code as follows:

<p> I want to say:</p>

Jquer Code:

Copy Code code as follows:

$ ("<b> Hello </b>"). Prependto ("P");

Results:

Copy Code code as follows:

<p><b> Hello </b> i want to say:</p>

After ()

Insert the content after each matching Yenso:

HTML code:

Copy Code code as follows:

<p> I want to say:</p>

Jquer Code:

Copy Code code as follows:

$ ("P"). After ("<b> Hello </b>");

Results:

Copy Code code as follows:

<p> I want to say hello,:</p><b> </b>

Insertafler ()

Inserts all matching elements behind the specified element. In fact, using this method reverses the normal $ (A). After (b) operation, that is, instead of inserting b behind a, insert a to B:

HTML code:

Copy Code code as follows:

<p> I want to say:</p>

Jquer Code:

Copy Code code as follows:

$ ("<b> Hello </b>"). InsertAfter ("P");

Results:

Copy Code code as follows:

<p> I want to say hello,:</p><b> </b>

Before ()

Insert the content before each matching element:

HTML code:

Copy Code code as follows:

<p> I want to say:</p>

Jquer Code:

Copy Code code as follows:

$ ("P"). Before ("<b> Hello </b>");

Results:

Copy Code code as follows:

<b> Hello </b><p> i want to say:</p>

InsertBefore ()

Poke all matching elements in front of the specified element. In fact, using this method reverses the normal $ (A). Before (b) operation, that is, not inserting B into front of a, but inserting A in front of B:

HTML code:

Copy Code code as follows:

<p> I want to say:</p>

Jquer Code:

Copy Code code as follows:

$ ("<b> Hello </b>"). InsertBefore ("P");

Results:

Copy Code code as follows:

<b> Hello </b><p> i want to say:</p>

These methods of inserting nodes can not only insert the newly created DOM elements into the document, but also move the existing DOM elements. such as using them to create and insert new elements:

$ (function () {
  var $li _1 = $ ("<li title= ' new node: Data structure ' > new node: Data structure </li>");//Create First <li> element
  var $li _2 = $ ("<li title= ' new node: design mode ' > new node: Design pattern </li>"); Create a second <li> element
  var $li _3 = $ ("<li title= ' new node: computer algorithm ' > new node: computer algorithm </li>");//create Third <li> element
  var $parent = $ (". Nm_ul");//Get <ul> node. <li> parent Node
  var $two _li = $ (". Nm_ul li:eq (1)");//Get the second <li> element node in <ul> node
  $ ("#btn_1"). Click ( function () {
    $parent. Append ($li _1);//Add to <ul> node so that it can be displayed in the Web page
  });
  $ ("#btn_2"). Click (function () {
    //can be written in a chained style: $parent. Append ($li _1). Append ($li _2);
    $parent. Append ($li _2);
  $ ("#btn_3"). Click (The function () {
    //InsertAfter method inserts the third <li> element element that is created into the obtained <li>
    $li _3. InsertAfter ($two _li); 
  });

They also use them to move the original DOM elements:

$ (function () {
  var $one _li = $ ("ul Li:eq (1)");//Get <ul> node Second <li> element node
  var $two = $ ("ul Li:eq (2)") ; Gets the third <li> element node in the <ul> node
  $two _li.insertbefore ($one _li);//Mobile Node
});

I hope this article will help you with your jquery programming.