JQuery创建DOM节点的方法

 更新时间:2015年06月11日 09:31:12   作者:简明现代魔法  
这篇文章主要介绍了JQuery创建DOM节点的方法,实例分析了jQuery创建元素结点、文本结点、属性结点的相关技巧,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章

  • 最新的10款jQuery内容滑块插件分享

    最新的10款jQuery内容滑块插件分享

    本篇文章介绍10款新鲜、有用的jQuery内容导航插件,肯定是免费的了,希望对你有帮助。
    2011-09-09
  • jQuery的ajax和遍历数组json实例代码

    jQuery的ajax和遍历数组json实例代码

    下面小编就为大家带来一篇jQuery的ajax和遍历数组json实例代码。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • jquery悬浮提示框完整实例

    jquery悬浮提示框完整实例

    这篇文章主要介绍了jquery悬浮提示框实现方法,涉及jQuery鼠标事件响应及页面元素样式的动态操作技巧,需要的朋友可以参考下
    2016-01-01
  • jQuery基础知识点总结(必看)

    jQuery基础知识点总结(必看)

    下面小编就为大家带来一篇jQuery基础知识点总结(必看)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • jquery实现滑动特效代码

    jquery实现滑动特效代码

    这篇文章主要介绍了jquery实现滑动特效代码, .slideUp([duration][,complete])目标元素向上滑入隐藏;.slideDown([duration][,complete])目标元素向下滑出显示;.slideToggle([duration][,complete])目标元素隐藏则向下滑出显示,否则向上滑入隐藏;需要的朋友参考下
    2015-08-08
  • jquery改变disabled的boolean状态的三种方法

    jquery改变disabled的boolean状态的三种方法

    改变disabled的boolean状态,下面为大家介绍三种比较不错的方法,大家可以参考下
    2013-12-12
  • jQuery基本选择器和层次选择器学习使用

    jQuery基本选择器和层次选择器学习使用

    这篇文章主要介绍了jQuery基本选择器和层次选择器的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • jQuery插件实现无缝滚动特效

    jQuery插件实现无缝滚动特效

    今天给大家分享一款页面无缝滚动的jquery插件,支持上下左右,淡入淡出,滚动时间设置,动画时间设置,感兴趣的小伙伴们可以参考一下
    2015-11-11
  • 非常棒的jQuery图片轮播效果

    非常棒的jQuery图片轮播效果

    这篇文章主要为大家介绍了一款非常棒的jQuery图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-04-04
  • JQuery实现鼠标滑过显示导航下拉列表

    JQuery实现鼠标滑过显示导航下拉列表

    我们往往是将同一级目录下的栏目先隐藏起来,当用户的鼠标滑过时则显示出来。这就是用javascript实现的一个导航栏下拉列表,下面为大家讲解下是如何实现的
    2013-09-09

最新评论