jquery的attr属性JQuery创建DOM节点的⽅法
本⽂实例讲述了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程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。