jquery creates a DOM node method _jquery

The example in this article describes the way jquery creates a DOM node. Share to everyone for your reference. The specific analysis is as follows:

The jquery selector enables you to quickly and easily find a specific element node in a document, and then you can use the attr () method to get the values of the various attributes of the element. But the real DOM operation is not so simple. In DOM operations, it is often necessary to dynamically create HTML content that changes the presentation of documents in browsers and achieves a wide variety of human-computer interactions.

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>

To create an element node

For example, to create two <li> element nodes, and to add them as child nodes of the <ul> element node to the DOM node tree. It takes two steps to complete this task.

1. Create two <li> new elements.
2. Insert the two new elements into the document.

The 1th step can be done using JQuery's Factory function $ (), in the following format:

$ (HTML);

The $ (HTML) method creates a DOM object based on the passed-in HTML tag string, wraps the DOM object into a jquery object, and returns.

First create two <li> elements, the jquery code is as follows:

var $li _1 = $ ("<li></li>"); Create the first <li> element
var $li _2 = $ ("<li></li>");//Create a second <li> element

The two new elements are then inserted into the document, using methods such as append () in jquery. The jquery code is as follows:

var $parent = $ (". Nm_ul"); Gets the <ul> node. <li> parent Node
$parent. Append ($li _1);//Add to <ul> node so that it can display
$parent. Append ($li _2);//Can be written in a chained style: $ Parent.append ($li _1). Append ($li _2);

Dynamically created new element nodes are not automatically added to the document, but need to be inserted into the document using other methods. When creating a single element, pay attention to closing the label and using the standard XHTML format. For example, to create a <p> element, you can use $ ("<p/>") or $ ("<p></p>"), but do not use $ ("<p>") or uppercase $ ("<P/>").

Create a text node

Two <li> element nodes have been created and inserted into the document. You need to add text content to the element node you created.

The jquery code is as follows:

var $li _1 = $ ("<li> new node: Data structure </li>"); Create the first <li> element
var $li _2 = $ ("<li> new node: design mode </li>");//Create a second <li> element
var $parent = $ (". NM _ul "); Gets the <ul> node. <li> parent Node
$parent. Append ($li _1);//Add to <ul> node so that it can display
$parent. Append ($li _2);//Can be written in a chained style: $ Parent.append ($li _1). Append ($li _2);

As shown in the above code, creating a text node is simply writing out the text content when you create the element node and then adding it to the document using methods such as append ().

Regardless of how complex the HTML code in $ (HTML) is, it is created in the same way. For example $ ("<li><em> This is </em><b> a </b><a href=" # "> Complex combination </a></li>");

To create an attribute node

Creating an attribute node is similar to creating a text node and is created directly when the element node is created. The jquery code is as follows:

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 $parent = $ (". Nm_ul"); Gets the <ul> node. <li> parent Node
$parent. Append ($li _1);//Add to <ul> node so that it can display
$parent. Append ($li _2);//Can be written in a chained style: $ Parent.append ($li _1). Append ($li _2);

Looking at the source tool from the browser to view the code, you can see that the last two <li> elements have a number of attribute nodes named "title". As a result, the text node and attribute node of the created element have been added to the Web page. This shows that using jquery to dynamically create HTML elements is very simple, convenient and flexible.

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