How to Create a DOM node using JQuery: jquerydom Node

How to Create a DOM node using JQuery: jquerydom Node

This document describes how to create a DOM node by using JQuery. Share it with you for your reference. The specific analysis is as follows:

You can use the JQuery selector to quickly and easily find a specific element node in the document, and then use the attr () method to obtain the values of various attributes of the element. But the real DOM operation is not that simple. In DOM operations, you often need to dynamically create HTML content to change the rendering Effect of documents in the browser and achieve various human-computer interactions.

The html dom structure is as follows:

<P class = "nm_p" title = "Welcome to "> welcome to </p> <ul class = "nm_ul"> <li title = 'php programming'> simple and easy-to-understand PHP programming </li> <li title = 'javascript programming '> simple and easy-to-understand JavaScript programming </li> <li title = 'jquery programming'> simple and easy-to-understand JQuery programming </li> </ul>

Create element nodes

For example, you need to create two <li> element nodes and add them as child nodes of <ul> element nodes to the DOM node tree. Two steps are required to complete this task.

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

The 1st step can be completed using jQuery's factory function $ (). The format is as follows:

$ (Html );

The $ (html) method creates a DOM object based on the input HTML Tag string, wraps the DOM object into a jQuery object, and returns the result.

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 the second <li> element

Insert the two new elements into the document. You can use the append () method in jQuery. The JQuery code is as follows:

Var $ parent = $ (". nm_ul"); // obtain the <ul> node. <Li> parent node $ parent. append ($ li_1); // Add it to the <ul> node to display $ parent on the webpage. append ($ li_2); // you can use the chained method: $ parent. append ($ li_1 ). append ($ li_2 );

The newly created element node is not automatically added to the document, but needs to be inserted into the document in other ways. When creating a single element, be sure to close the tag and use the standard XHTML format. For example, to create a <p> element, you can use $ ("<p/>") or $ ("<p> </p> "), but do not use $ ("<p>") or Capital $ ("<P/> ").

Create a text node

Two <li> element nodes have been created and inserted into the document. Add text content to the created element node.

The JQuery code is as follows:

Var $ li_1 = $ ("<li> Add node: Data Structure </li> "); // create the first <li> element var $ li_2 = $ ("<li> Add node: design mode </li> "); // create the second <li> element var $ parent = $ (". nm_ul "); // obtain the <ul> node. <Li> parent node $ parent. append ($ li_1); // Add it to the <ul> node to display $ parent on the webpage. append ($ li_2); // you can use the chained method: $ parent. append ($ li_1 ). append ($ li_2 );

As shown in the code above, creating a text node is to directly write the text content when creating an element node, and then add them to the document using methods such as append.

No matter how complicated the html code in $ (HTML) is, you must create it in the same way. For example, $ ("<li> <em> This is </em> <B> a </B> <a href =" # "> complex combination </a> </ li> ");

Create a property Node

Creating an attribute node is similar to creating a text node. It is also directly created when an element node is created. The JQuery code is as follows:

Var $ li_1 = $ ("<li title = 'add node: Data struct'> 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 $ parent = $ (". nm_ul "); // obtain the <ul> node. <Li> parent node $ parent. append ($ li_1); // Add it to the <ul> node to display $ parent on the webpage. append ($ li_2); // you can use the chained method: $ parent. append ($ li_1 ). append ($ li_2 );

View the code using the source code tool in the browser. You can see that the last two <li> elements have an attribute node named "title. It can be determined that the text node and attribute node of the created element have been added to the webpage. It can be seen that using jQuery to dynamically create HTML elements is very simple, convenient, and flexible.

I hope this article will help you with jQuery programming.