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 相关文章推荐
Ajax中解析Json的两种方法对比分析
Jun 25 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
Vue原理剖析 实现双向绑定MVVM
May 03 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
React BootStrap用户体验框架快速上手
Mar 06 Javascript
vue 指定组件缓存实例详解
Apr 01 Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 Javascript
js实现倒计时秒杀效果
Mar 25 Javascript
vue+ts下对axios的封装实现
Feb 18 Javascript
javascript实现前端成语点击验证优化
Jun 24 Javascript
Openlayers实现地图的基本操作
Sep 28 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 3行代码的分页算法(求起始页和结束页)
2009/10/21 PHP
PHP合并数组的2种方法小结
2016/11/24 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
实现JavaScript中继承的三种方式
2009/10/16 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
js 鼠标移动显示图片的简单实例
2013/12/25 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
使用jquery清空、复位整个输入域
2015/04/02 Javascript
javascript实现列表滚动的方法
2015/07/30 Javascript
js获取元素的外链样式的简单实现方法
2016/06/06 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
原生JS实现-星级评分系统的简单实例
2016/08/21 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
使用JS location实现搜索框历史记录功能
2019/12/23 Javascript
javascript实现拖拽碰撞检测
2020/03/12 Javascript
Python 基础教程之包和类的用法
2017/02/23 Python
python中如何使用正则表达式的集合字符示例
2017/10/09 Python
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
Python中协程用法代码详解
2018/02/10 Python
Python标准库笔记struct模块的使用
2018/02/22 Python
python字符串分割及字符串的一些常规方法
2019/07/24 Python
Python使用ElementTree美化XML格式的操作
2020/03/06 Python
python判断all函数输出结果是否为true的方法
2020/12/03 Python
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
前台领班岗位职责
2013/12/04 职场文书
护士求职信
2014/07/05 职场文书
教师优秀党员事迹材料
2014/08/14 职场文书
调研座谈会发言材料
2014/08/23 职场文书
草房子读书笔记
2015/06/29 职场文书
小学教师教学随笔
2015/08/14 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
关于Python OS模块常用文件/目录函数详解
2021/07/01 Python
IDEA 2022 Translation 未知错误 翻译文档失败
2022/04/24 Java/Android