JQuery's method of creating DOM nodes_jquery

The example in this article describes how JQuery creates DOM nodes. Share it with everyone for your reference. The specific analysis is as follows:

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 real DOM manipulation is not that simple. In DOM operations, it is often necessary to dynamically create HTML content to change the presentation of documents in the browser and achieve various human-computer interaction purposes.

HTML DOM structure is as follows:

<p class="nm_p" title="欢迎访问脚本之家" >欢迎访问脚本之家</p>
<ul class="nm_ul">
    <li title='PHP编程'>简单易懂的PHP编程</li>
    <li title='JavaScript编程'>简单易懂的JavaScript编程</li>
    <li title='JQuery编程'>简单易懂的JQuery编程</li>
</ul>

Create element node

For example, you want to create two 25edfb22a4f469ecb59f1190150159c6 element nodes and add them to the DOM node tree as child nodes of the ff6d136ddc5fdfeffaf53ff6ee95f185 element node. Completing this task requires two steps.

1. Create two 25edfb22a4f469ecb59f1190150159c6 new elements.
2. Insert the two new elements into the document.

The first step can be completed using jQuery’s factory function $(), in the following format:

$(html);

The

$(html) method will create a DOM object based on the incoming HTML markup string, wrap the DOM object into a jQuery object and return it.

First create two 25edfb22a4f469ecb59f1190150159c6 elements, the jQuery code is as follows:

var $li_1 = $("<li></li>"); // 创建第一个<li>元素
var $li_2 = $("<li></li>"); // 创建第二个<li>元素

Then insert these two new elements into the document, you can use methods such as append() in jQuery. The JQuery code is as follows:

var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

New element nodes created dynamically will not be automatically added to the document, but will need to be inserted into the document using other methods. When creating individual elements, be careful about closing tags and using standard XHTML formatting. For example, to create a e388a4556c0f65e1904146cc1a846bee element, you can use $("a6f776b766579c28d02706af09482172") or $("e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3"), but do not use $("e388a4556c0f65e1904146cc1a846bee") Or uppercase $("4ba45e75bc6a82723461547597599043").

Create text node

Two 25edfb22a4f469ecb59f1190150159c6 element nodes have been created and inserted into the document. At this time, you need to add text content to the created element node.

The JQuery code is as follows:

var $li_1 = $("
新增节点：数据结构
"); // 创建第一个
元素
var $li_2 = $("
新增节点：设计模式
"); // 创建第二个
元素
var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

As shown in the above code, creating text nodes is to write the text content directly when creating element nodes, and then use append() and other methods to add them to the document.

No matter how complex the HTML code in $(html) is, it must be created in the same way. For example $("25edfb22a4f469ecb59f1190150159c6907fae80ddef53131f3292ee4f81644bThis isd1c6776b927dc33c5d9114750b586338a4b561c25d9afb9ac8dc4d70affff419a0d36329ec37a2cc24d42c7229b69747aee7959cc8dd4be16ef633321c03dac32complex combination5db79b134e9f6b82c0b36e0489ee08ed2867e861ba23559b572f230426ab14ea");

Create attribute node

Creating attribute nodes is similar to creating text nodes, and is also created directly when creating element nodes. The JQuery code is as follows:

var $li_1 = $("<li title='新增节点：数据结构'>新增节点：数据结构</li>"); // 创建第一个<li>元素
var $li_2 = $("<li title='新增节点：设计模式'>新增节点：设计模式</li>"); // 创建第二个<li>元素
var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);

View the code through the browser source code tool, and you can see that the last two 25edfb22a4f469ecb59f1190150159c6 elements have an attribute node named "title". It can be judged from this that the text nodes and attribute nodes of the created element have been added to the web page. It can be seen that using jQuery to dynamically create HTML elements is very simple, convenient and flexible.

I hope this article will be helpful to everyone’s jQuery programming.