jquery+加入新元素_jQuery How-to：创建和插入新元素（第2部分）

在上一篇文章中 ，我们开始了关于如何使用jQuery（和JavaScript）Append方法创建和插入新元素的讨论。 我们已经学习了如何在正文文档中创建新元素并将其插入。

在其基本形式中，Append方法将新元素作为最后一个子元素或（技术上）插入到指定元素的结束标记之前。 但是，在某些情况下，我们可能需要在更特定的位置插入新元素。 在这篇文章中，我们将解决这个问题。

为了演示，我们准备了以下HTML无序列表结构，其中包含id list 。

<ul id="list">
	<li>Ut enim ad minim veniam.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
	<li>Duis aute irure dolor in reprehenderit.</li>
	<li>Sunt in culpa qui officia deserunt mollit.</li>
	<li>Excepteur sint occaecat cupidatat non proident.</li>
</ul>

插入新元素作为第一个孩子

在第一个示例中，我们将创建一个新元素并将其作为指定元素（父元素）的第一个子元素插入。 就像我们之前的文章一样，我们将首先看看它是如何使用JavaScript以及随后使用jQuery来完成的。

下例中的想法是，我们将创建一个新的<li> ，然后将其作为<ul>的第一个子项插入。 因此，让我们创建一个新元素以及其中的文本，就像这样。

var li 	= document.createElement('li'),
	txt = document.createTextNode('This is the text in new element.');

li.appendChild(txt);

要将这个元素作为第一个孩子插入，我们可以使用JavaScript .insertBefore()函数 。 此功能允许我们在现有元素之前插入一个元素。

现在，我们需要指定在哪个父级中嵌套新元素。 在此示例中，我们通过获取元素的ID属性来指定该元素，如下所示：

ul 	= document.getElementById('list');

然后，我们需要定义在哪个元素之前放置“新元素”。 在我们的例子中，它将是父母的第一个孩子 。 在JavaScript中，我们可以使用.firstChild函数获取第一个子元素，并将其存储在名为firstChild的变量中。

var firstChild = ul.firstChild;

然后，我们应用该功能。 首先，我们用ul变量设置父元素，后跟.insertBefore()函数，如下所示。

ul.insertBefore();

在括号内，我们指定新元素，后跟引用元素（父元素的第一个子元素）。

ul.insertBefore(li, firstChild);

上面的代码将在第一个子元素之前插入新的li 。 如果我们查看浏览器并通过开发人员工具检查元素，我们将得到以下结果：

我们看到我们的新元素现在是<ul>的第一个孩子。

使用jQuery

或者，我们可以使用jQuery。 jQuery有一个名为.prepend()的函数 。 我们可以通过获得相同的结果 用这种方式编写它。

$('#list').prepend('<li>This is the text in new element. (with jQuery)</li>');

在特定点插入新元素

现在，如何在更具体的位置添加新元素，例如在 ^第三个孩子之前或之后 ，而不是第一个和最后一个。 这是我们在JavaScript和jQuery中都这样做的方式。

我们从上一个示例中创建了一个新元素，如下所示：

var li 	= document.createElement('li'),
	txt = document.createTextNode('This is the text in new element.');
li.appendChild(txt);

我们需要获取list元素。 在JavaScript中，我们使用.getElementsByTagName()通过标签名称选择元素。

var list = document.getElementsByTagName('li');

之后，我们需要获取^第三个列表元素，可以使用其索引号指定它​​。 在JavaScript中索引号从开始0 ，因此^第三元件将是2在索引中。 在下面的代码中，我们将此元素存储在nthList变量中。

var nthList = list[2];

现在，我们可以使用.insertBefore()函数在指定元素的^第三个子元素之前添加新元素：

ul.insertBefore(li, nthList);

如果查看浏览器，将会得到：

要在其后插入新元素，我们可以将.insertBefore()函数与.nextSibling()一起使用，后者指定下一个元素。

ul.insertBefore(li, nthList.nextSibling);

与前面的示例相反，以下代码将新元素插入到指定元素的^第三个子元素之后 。

使用jQuery

jQuery的引入.before()和.after()函数来简化这个过程。 并且，我们可以使用jQuery .eq()函数以元素的索引为目标。

参考上面的示例，我们可以执行以下操作：

$('li').eq(2).before('<li'>This is the text in new element. (with jQuery)</li>');

在指定元素的^第三个子元素之前添加新元素。 或者，我们可以将其编写为在其后插入。

$('li').eq(2).after('<li'>This is the text in new element. (with jQuery)</li>');

结论

我们已经学习了如何使用JavaScript创建和插入新元素，以及使用jQuery函数简化了过程（但仍获得了相同的结果）。 现在由您选择确定哪种方法对您的案件更有效。

希望本次会议对您特别有用，特别是对于那些刚开始使用jQuery或JavaScript的人。 如果您有任何疑问，请随时在下面的评论部分中添加。

有用的资源

以下是一些有用的资源，可以进一步深入研究该主题。

• JavaScript .insertBefore函数 – MDN
• JavaScript .nextSibling函数 – MDN
• jQuery .before（）函数 – jQuery API文档
• jQuery .after（）函数 – jQuery API文档
• jQuery .eq（）函数 – jQuery API文档

翻译自: https://www.hongkiat.com/blog/jquery-insert-element-part2/