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 相关文章推荐
javascript 异常处理使用总结
Jun 21 Javascript
用JQuery实现表格隔行变色和突出显示当前行的代码
Feb 10 Javascript
MultiSelect左右选择控件的设计与实现介绍
Jun 08 Javascript
实例讲解JS中数组Array的操作方法
May 09 Javascript
详解AngularJS中自定义指令的使用
Jun 17 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
Jun 08 Javascript
浅析ES6的八进制与二进制整数字面量
Aug 30 Javascript
js阻止移动端页面滚动的两种方法
Jan 25 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
Dec 07 Javascript
jQuery分组选择器简单用法示例
Apr 04 jQuery
vue项目创建步骤及路由router
Jan 14 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:风雨欲来 路在何方?
2006/10/09 PHP
纯真IP数据库的应用 IP地址转化成十进制
2009/06/14 PHP
php基础学习之变量的使用
2011/06/09 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
php设置页面超时时间解决方法
2015/09/22 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
JS获取屏幕,浏览器窗口大小,网页高度宽度(实现代码)
2013/12/17 Javascript
js与jquery获取父级元素,子级元素,兄弟元素的实现方法
2014/01/09 Javascript
JavaScript程序员应该知道的45个实用技巧
2014/03/04 Javascript
JS转换HTML转义符的方法
2016/08/24 Javascript
浅谈js中function的参数默认值
2017/02/20 Javascript
详解vue表单验证组件 v-verify-plugin
2017/04/19 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
从零学python系列之浅谈pickle模块封装和拆封数据对象的方法
2014/05/23 Python
Python编程argparse入门浅析
2018/02/07 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
django如何连接已存在数据的数据库
2018/08/14 Python
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
Python面向对象原理与基础语法详解
2020/01/02 Python
Python和Anaconda和Pycharm安装教程图文详解
2020/02/04 Python
python检查目录文件权限并修改目录文件权限的操作
2020/03/11 Python
pandas数据拼接的实现示例
2020/04/16 Python
Python接口开发实现步骤详解
2020/04/26 Python
python 批量将中文名转换为拼音
2021/02/07 Python
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
物流专业大学应届生求职信
2013/11/03 职场文书
奶茶专卖店创业计划书
2014/01/18 职场文书
文明宿舍获奖感言
2014/02/07 职场文书
小区消防演习方案
2014/02/21 职场文书
中华魂演讲稿
2014/05/13 职场文书
爱与责任演讲稿
2014/05/20 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
关于保护环境的建议书
2019/06/24 职场文书
Nginx下SSL证书安装部署步骤介绍
2021/12/06 Servers