JQuery创建DOM节点的方法_jquery
程序员文章站
2022-04-22 19:14:13
...
本文实例讲述了JQuery创建DOM节点的方法。分享给大家供大家参考。具体分析如下:
元素节点,并且要把它们作为
用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值。但真正的DOM操作并非这么简单。在DOM操作中,常常需要动态创建HTML内容,使文档在浏览器里的呈现效果发生变化,并且达到各种各样的人机交互的目的。
HTML DOM结构如下:
欢迎访问脚本之家
- 简单易懂的PHP编程
- 简单易懂的JavaScript编程
- 简单易懂的JQuery编程
创建元素节点
例如要创建两个
- 元素节点的子节点添加到DOM节点树上。完成这个任务需要两个步骤。
- 新元素。
2. 将这两个新元素插入文档中。第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下:
$(html);
$(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个DOM对象包装成一个jQuery对象后返回。
首先创建两个
- 元素,jQuery代码如下:
var $li_1 = $("
- "); // 创建第一个
- 元素 var $li_2 = $("
- "); // 创建第二个
- 元素
然后将这两个新元素插入文档中,可以使用jQuery中的append()等方法。JQuery代码如下:
var $parent = $(".nm_ul"); // 获取
- 节点。
- 的父节点
$parent.append($li_1); // 添加到
- 节点中,使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法:$parent.append($li_1).append($li_2);
动态创建的新元素节点不会被自动添加到文档中,而是需要使用其他方法将其插入文档中。当创建单个元素时,要注意闭合标签和使用标准的XHTML格式。例如创建一个
元素,可以用$("
")或者$(""),但不要使用$("")或者大写的$("
")。创建文本节点
已经创建了两个
- 元素节点并把它们插入文档中了。此时需要为创建的元素节点添加文本内容。
JQuery代码如下:
var $li_1 = $("
- 新增节点:数据结构
"); // 创建第一个- 元素 var $li_2 = $("
- 新增节点:设计模式
"); // 创建第二个- 元素 var $parent = $(".nm_ul"); // 获取
- 节点。
- 的父节点
$parent.append($li_1); // 添加到
- 节点中,使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法:$parent.append($li_1).append($li_2);
如以上代码所示,创建文本节点就是在创建元素节点时直接把文本内容写出来,然后使用append()等方法将它们添加到文档中就可以了。
无论$(html)中的HTML代码多么复杂,都要使用相同的方式来创建。例如$("
- 这是一个复杂的组合 ");
- 新增节点:数据结构 "); // 创建第一个
- 元素 var $li_2 = $("
- 新增节点:设计模式 "); // 创建第二个
- 元素
var $parent = $(".nm_ul"); // 获取
- 节点。
- 的父节点
$parent.append($li_1); // 添加到
- 节点中,使之能在网页中显示
$parent.append($li_2); // 可以采取链式写法:$parent.append($li_1).append($li_2);
- 的父节点
$parent.append($li_1); // 添加到
- 元素多了名为“title”的属性节点。由此可以判断,创建的元素的文本节点和属性节点都已经添加到网页中了。由此可见用jQuery来动态创建HTML元素是非常简单、方便和灵活的。
希望本文所述对大家的jQuery程序设计有所帮助。
1. 创建两个
创建属性节点
创建属性节点与创建文本节点类似,也是直接在创建元素节点时一起创建。JQuery代码如下:
var $li_1 = $("
通过浏览器查看源代码工具查看代码,可以看到最后两个
推荐阅读
-
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
-
jQuery使用正则验证15/18身份证的方法示例
-
JS/jquery实现一个网页内同时调用多个倒计时的方法
-
jQuery EasyUI tree增加搜索功能的实现方法
-
jQuery实现动态添加、删除按钮及input输入框的方法
-
js添加节点的方法(js创建节点时同时添加属性)
-
Easyui 去除jquery-easui tab页div自带滚动条的方法
-
JS实现动态添加DOM节点和事件的方法示例
-
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
-
Vue项目中使用jquery的简单方法