如何插入元素作为第一个孩子？答案

【问题标题】：How to insert element as a first child?如何插入元素作为第一个孩子？
【发布时间】：2011-05-30 11:59:14
【问题描述】：

我想在每次点击按钮时使用 jquery 添加一个 div 作为第一个元素

<div id='parent-div'>
    <!--insert element as a first child here ...-->

    <div class='child-div'>some text</div>
    <div class='child-div'>some text</div>
    <div class='child-div'>some text</div>

</div>

【问题讨论】：

这个问题的答案也适用于一个空的 child-div 元素列表。太好了！

标签： jquery prepend css-selectors

【解决方案1】：

试试$.prepend() 函数。

用法

$("#parent-div").prepend("<div class='child-div'>some text</div>");

演示

var i = 0;
$(document).ready(function () {
    $('.add').on('click', function (event) {
        var html = "<div class='child-div'>some text " + i++ + "</div>";
        $("#parent-div").prepend(html);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="parent-div">
    <div>Hello World</div>
</div>
<input type="button" value="add" class="add" />

【讨论】：

这个解决方案的问题是它作为第一个孩子而不是在列表孩子之前插入，如果父容器包含不同的子元素并且想要在一组特定的子节点之前插入，这个不会工作。
起初，我并不清楚如果 child-div 元素为零，此解决方案也适用。 prepend() 将插入空列表并创建第一个 child-div 元素。当然，append() 也可以，但是列表是按另一个顺序创建的。

【解决方案2】：

扩展 @vabhatia 所说的，这就是你想要的原生 JavaScript（没有 JQuery）。

ParentNode.insertBefore(<your element>, ParentNode.firstChild);

【讨论】：

【解决方案3】：

使用：$("<p>Test</p>").prependTo(".inner"); 查看.prepend documentation on jquery.com

【讨论】：

这将插入多个节点，每个子节点前一个。

【解决方案4】：

parentNode.insertBefore(newChild, refChild)

在现有子节点 refChild 之前插入节点 newChild 作为 parentNode 的子节点。（返回 newChild。）

如果 refChild 为 null，则将 newChild 添加到子列表的末尾。等效且更具可读性的是，使用 parentNode.appendChild(newChild)。

【讨论】：

从另一个帖子中直接复制和粘贴。或许可以参考具体问题及其关系？

【解决方案5】：

parentElement.prepend(newFirstChild);

这是（可能）ES7 中的新增功能。它现在是 vanilla JS，可能是由于 jQuery 的流行。它目前在 Chrome、FF 和 Opera 中可用。转译器应该能够处理它，直到它在任何地方都可用。

附：您可以直接添加字符串

parentElement.prepend('This text!');

链接：developer.mozilla.org - Polyfill

【讨论】：

【解决方案6】：

此处必填

<div class="outer">Outer Text <div class="inner"> Inner Text</div> </div>

由

添加

$(document).ready(function(){ $('.inner').prepend('<div class="middle">New Text Middle</div>'); });

【讨论】：

【解决方案7】：

$(".child-div div:first").before("Your div code or some text");

【讨论】：

child-div 下没有子节点

【解决方案8】：

$('.parent-div').children(':first').before("<div class='child-div'>some text</div>");

【讨论】：

这将插入before 每个孩子，即您最终将插入多个节点。