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

Question

我希望在每次单击按钮时使用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> 

Answer 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" />

Answer 2

扩展@vabhatia所说的,这就是你想要的原生JavaScript(没有JQuery).

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

Answer 3

使用:$("<p>Test</p>").prependTo(".inner"); 查看jquery.com上的.prepend文档

Answer 4

parentNode.insertBefore(newChild, refChild)

在现有子节点refChild之前插入节点newChild作为parentNode的子节点.(返回newChild.)

如果refChild为null,则在子项列表的末尾添加newChild.等效地,更可读的是,使用parentNode.appendChild(newChild).

Answer 5

parentElement.prepend(newFirstChild);

这是（可能）ES7 中的新增内容。现在它是普通的 JS，可能是由于 jQuery 的流行。目前可在 Chrome、FF 和 Opera 中使用。转译器应该能够处理它，直到它随处可用。

PS 你可以直接在前面添加字符串

parentElement.prepend('This text!');

链接：developer.mozilla.org - Polyfill