JQuery创建DOM节点的方法

2020-05-22 17:07:04易采站长站整理

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

如以上代码所示,创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用append()等方法将它们添加到文档中就可以了。

无论$(html)中的HTML代码多么复杂,都要使用相同的方式来创建。例如$(“<li><em>这是</em><b>一个</b><a href=”#”>复杂的组合</a></li>”);

创建属性节点

创建属性节点与创建文本节点类似,也是直接在创建元素节点时一起创建。JQuery代码如下:


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);

通过浏览器查看源代码工具查看代码,可以看到最后两个<li>元素多了名为“title”的属性节点。由此可以判断,创建的元素的文本节点和属性节点都已经添加到网页中了。由此可见用jQuery来动态创建HTML元素是非常简单、方便和灵活的。

希望本文所述对大家的jQuery程序设计有所帮助。