jQuery动态创建DOM节点:元素、文本与属性的完整指南
本文详细介绍利用jQuery动态创建DOM节点的方法。通过工厂函数$()快速生成元素节点,结合append()等插入文档。涵盖纯文本节点、带属性节点及复杂嵌套HTML的创建技巧,强调闭合标签规范与链式调用,帮助开发者实现灵活的人机交互效果。
jQuery动态创建DOM节点概述
本文详细解析了利用jQuery动态生成DOM节点的具体实现方式,旨在为读者提供实用的参考与借鉴。
虽然jQuery选择器能便捷地定位特定元素节点,并通过attr()获取属性值,但实际的DOM操作远不止于此。在开发过程中,经常需要动态生成HTML内容,以改变页面在浏览器中的呈现效果,并实现多样化的用户交互功能。
假设HTML DOM结构如下所示:
<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>
元素节点的创建与插入
创建元素节点
以创建两个<li>元素节点并将其作为子节点添加到<ul>元素为例,该任务需分两步完成。
第一步是创建两个新的<li>元素;第二步则是将这些新元素插入到文档结构中。
第一步可通过jQuery的工厂函数$()来实现,其基本语法格式如下:
$(html);
$(html)方法接收一个HTML标记字符串作为参数,据此创建一个对应的DOM对象,并将其封装为jQuery对象返回。
首先,我们来创建两个<li>元素,对应的jQuery代码如下:
var $li_1 = $("<li></li>"); // 创建第一个<li>元素
var $li_2 = $("<li></li>"); // 创建第二个<li>元素
随后,需将这些新元素插入文档,可借助jQuery提供的append()等方法实现。具体jQuery代码如下:
var $parent = $(".nm_ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中,使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法:$parent.append($li_1).append($li_2);
动态创建的新元素节点不会自动加入文档,必须使用特定方法将其插入。在创建单个元素时,务必注意闭合标签及标准XHTML格式。例如,创建<p>元素可使用$("<p/>")或$("<p></p>"),但应避免使用$("<p>")或大写的$("<P/>")。
文本节点与属性节点的创建技巧
创建文本节点
在已将两个<li>元素节点创建并插入文档后,接下来需为这些元素添加文本内容。
实现该功能的jQuery代码如下:
var $li_1 = $("<li>新增节点:数据结构</li>"); // 创建第一个<li>元素
var $li_2 = $("<li>新增节点:设计模式</li>"); // 创建第二个<li>元素
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程序设计工作有所帮助。
anime.js 快速入门:怎么引入库并编写第一个 DOM 动画
2026-11-05 14:22:43
在线JS解密后变量名仍乱码?结合浏览器DevTools调试还原
2026-11-04 20:26:01
怎么在浏览器中运行JavaScript代码并查看输出结果
2026-11-04 09:07:33
JS 获取屏幕分辨率:window.screen.width 与 height 用法
2026-11-04 08:52:48
为什么推荐用DOMContentLoaded代替window.onload初始化JS
2026-11-04 08:42:33
