JQuery创建DOM节点的方法


Posted in Javascript onJune 11, 2015

本文实例讲述了JQuery创建DOM节点的方法。分享给大家供大家参考。具体分析如下:

用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值。但真正的DOM操作并非这么简单。在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>元素节点的子节点添加到DOM节点树上。完成这个任务需要两个步骤。

1. 创建两个<li>新元素。
2. 将这两个新元素插入文档中。

第1个步骤可以使用jQuery的工厂函数$()来完成,格式如下:

$(html);

$(html)方法会根据传入的HTML标记字符串,创建一个DOM对象,并将这个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程序设计有所帮助。

Javascript 相关文章推荐
img标签中onerror用法
Aug 13 Javascript
Ubuntu 11.10 安装Node.js的方法
Nov 30 Javascript
innerHTML动态添加html代码和脚本兼容多个浏览器
Oct 11 Javascript
JS动态创建元素的两种方法
Apr 20 Javascript
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
Jul 22 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
Mar 15 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
JavaScript中防止微信浏览器被整体拖动的方法
Aug 25 Javascript
详解搭建es6+devServer简单开发环境
Sep 25 Javascript
在Vue中使用axios请求拦截的实现方法
Oct 25 Javascript
详解vue-property-decorator使用手册
Jul 29 Javascript
vue.js实现图书管理功能
Sep 24 Javascript
JQuery查找DOM节点的方法
Jun 11 #Javascript
JQuery鼠标移到小图显示大图效果的方法
Jun 10 #Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 #Javascript
jquery序列化方法实例分析
Jun 10 #Javascript
jQuery实现dialog设置focus焦点的方法
Jun 10 #Javascript
jQuery替换textarea中换行的方法
Jun 10 #Javascript
简介JavaScript中getUTCMonth()方法的使用
Jun 10 #Javascript
You might like
PHP substr 截取字符串出现乱码问题解决方法[utf8与gb2312]
2011/12/16 PHP
php+mysqli使用面向对象方式查询数据库实例
2015/01/29 PHP
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
每天一篇javascript学习小结(Date对象)
2015/11/13 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
JavaScript实现点击按钮复制指定区域文本(推荐)
2016/11/25 Javascript
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
vue路由--网站导航功能详解
2019/03/29 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
layui表格 列自动适应大小失效的解决方法
2019/09/06 Javascript
使用js实现单链解决前端队列问题的方法
2020/02/03 Javascript
[02:37]2015国际邀请赛选手档案—LGD.Xiao8
2015/07/28 DOTA
深入解析Python中函数的参数与作用域
2016/03/20 Python
浅析Python中的多条件排序实现
2016/06/07 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
详解python变量与数据类型
2020/08/25 Python
python 实现音频叠加的示例
2020/10/29 Python
英国儿童家具专卖店:GLTC
2016/09/24 全球购物
ghd澳大利亚官方网站:英国最受欢迎的美发工具品牌
2018/05/21 全球购物
eDreams加拿大:廉价航班、酒店和度假
2019/03/29 全球购物
Linux如何为某个操作添加别名
2015/02/05 面试题
关于青春的演讲稿三分钟
2014/08/22 职场文书
奉献家乡演讲稿
2014/09/16 职场文书
优秀班主任材料
2014/12/16 职场文书
党性分析材料格式
2014/12/19 职场文书
国家助学金感谢信
2015/01/21 职场文书
九九重阳节致辞
2015/07/31 职场文书
800字作文之大雪
2019/12/04 职场文书
Python使用scapy模块发包收包
2021/05/07 Python
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android
Pytorch中expand()的使用(扩展某个维度)
2022/07/15 Python