JavaScript 如何向一个DOM元素内连续插入N个相同的子节点

有很多方法的

append(content)

向每个匹配的元素内部追加内容。这个 *** 作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

appendTo(content)

把所有匹配的元素追加到另一个、指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的$(A).append(B)的 *** 作，即不是把B追加到A中，而是把A追加到B中。在jQuery 1.3.2中，appendTo, prependTo, insertBefore, insertAfter, 和 replaceAll这个几个方法成为一个破坏性 *** 作，返回值是所有被追加的内容，而不仅仅是先前所选中的元素。所以，要选择先前选中的元素，需要使用 end()方法，参见例二。

。。。。。。

还有很多！你随便找一个jquery的api，里面文档处理里有很多方法的

appendChild，把一个子节点添加到父节点的最后一个子节点

insertBefore(newElement, referenceElement)，子节点会插入到referenceElement之前

以上两种方法：如果被插入的节点是已经存在于当前的文档树，因此这个节点首先会从原先的位置删除，再插入到新的位置。

即如下例子，想要两个元素位置替换时 insertBefore就可以做到，因为它会先删除之前位置的节点 并把它插到新的位置

用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元素是非常简单、方便和灵活的。

---