JQuery Method for inserting a DOM node _ jquery

This article mainly introduces JQuery's method of inserting a DOM node. examples show the common function usage skills involved in jQuery's DOM node insertion, for more information about how to insert a DOM node to JQuery, see the example in this article. Share it with you for your reference. The specific analysis is as follows:

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.

The html dom structure is as follows:

Welcome to my home
 
 
  
  
  
Simple PHP programming
  
  
  
Simple and easy-to-understand JavaScript programming
  
  
  
Simple and easy-to-understand JQuery Programming
 
 

Append ()

Append content to each matching element:

HTML code:

The Code is as follows:

I want to say:

JQuery code:

The Code is as follows:

$ ("P"). append ("Hi!");

Result:

The Code is as follows:

I want to say:Hi!

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:

The Code is as follows:

I want to say:

JQuer code:

The Code is as follows:

$ ("Hi!"). AppendTo (" p ");

Result:

The Code is as follows:

I want to say:Hi!

Prepend ()

To the internal content of each matching element:

HTML code:

The Code is as follows:

I want to say:

JQuer code:

The Code is as follows:

$ ("P"). prepend <"Hi!");

Result:

The Code is as follows:

Hi!I want to say:

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:

The Code is as follows:

I want to say:

JQuer code:

The Code is as follows:

$ ("Hi!"). PrependTo (" p ");

Result:

The Code is as follows:

Hi!I want to say:

After ()

Insert the following content after each matching element:

HTML code:

The Code is as follows:

I want to say:

JQuer code:

The Code is as follows:

$ ("P"). after ("Hi!");

Result:

The Code is as follows:

I want to say:

Hi!

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:

The Code is as follows:

I want to say:

JQuer code:

The Code is as follows:

$ ("Hi!"). InsertAfter (" p ");

Result:

The Code is as follows:

I want to say:

Hi!

Before ()

Insert content before each matching element:

HTML code:

The Code is as follows:

I want to say:

JQuer code:

The Code is as follows:

$ ("P"). before ("Hi!");

Result:

The Code is as follows:

Hi!

I want to say:

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:

The Code is as follows:

I want to say:

JQuer code:

The Code is as follows:

$ ("Hi!"). InsertBefore (" p ");

Result:

The Code is as follows:

Hi!

I want to say:

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 = $ ("
Add node: Data Structure
"); // Create the first
Element var $ li_2 = $ ("
Add node: Design Mode
"); // Create the second
Element var $ li_3 = $ ("
New node: Computer Algorithm
"); // Create the third
Element var $ parent = $ (". nm_ul"); // get
  
  

    Node. 
   
Parent node var $ two_li = $ (". nm_ul li: eq (1)"); // get 
    

      The second node 
     
Element Node $ ("# btn_1"). click (function () {$ parent. append ($ li_1); // Add 
      

        Node to display 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 third method created by the insertAfter Method 
       
Insert element to the retrieved
 
       
Then $ 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 node
  
  
Element Node var $ two_li = $ ("ul li: eq (2)"); // get 
   

     The third Node 
    
Element Node $ two_li.insertBefore ($ one_li); // mobile node });
 
   
 
 

I hope this article will help you with jQuery programming.