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

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> 

- Rana Imtiaz

---

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

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

- Mohamed Nuur

---

这种解决方案的问题在于它作为第一个子元素插入，而不是在列表子元素之前插入。如果父容器包含不同的子元素，而且想要在特定的一组子节点之前插入，那么这种方法将行不通。 - Aurovrata

起初，我并没有意识到这个解决方案也适用于没有子div元素的情况。prepend()会将内容插入空列表并创建第一个子div元素。当然，append()也可以使用，但是列表的顺序会不同。 - Roland

Answer 2

扩展 @vabhatia 的说法，这是你想要的本机JavaScript代码（不使用JQuery）。

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

- dtsn

Answer 3

使用方法：$("<p>测试</p>").prependTo(".inner"); 请查看jquery.com上的.prepend文档

- WizxX20

---

这将插入多个节点，每个节点都在其子节点之前。 - Aurovrata

Answer 4

parentNode.insertBefore(newChild, refChild)

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

如果refChild为空，newChild将添加到子节点列表的末尾。同样地，更易读的方式是使用parentNode.appendChild (newChild)。

- Varun Bhatia

---

直接复制粘贴其他帖子中的内容。可以参考具体问题及其相关性。 - roberthuttinger

Answer 5

parentElement.prepend(newFirstChild);

这是（可能）ES7中的新功能。由于jQuery的普及，它现在是原生JS。目前在Chrome、FF和Opera中可用。转换器应该能够处理它，直到它在所有地方都可用。

P.S. 您可以直接在字符串前面添加

parentElement.prepend('This text!');

Links: developer.mozilla.org - Polyfill

- Gibolt

Answer 6

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

- Sayed

---

这将在每个子节点之前插入before，也就是说你最终会插入多个节点。 - Aurovrata

Answer 7

这里是必需的

<div class="outer">外部文本 <div class="inner"> 内部文本</div> </div>

添加者

$(document).ready(function(){ $('.inner').prepend('<div class="middle">新的中间文本</div>'); });

- Chintan7027

Answer 8

$(".child-div div:first").before("你的div代码或一些文本");

- THAS

---

子div下面没有子节点。 - Aurovrata