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


96

我想在每次单击按钮时使用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元素列表。大!
罗兰

Answers:


162

尝试该$.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" />


该解决方案的问题在于,它作为第一个孩子插入,而不是在列表孩子之前插入,如果父容器包含不同的孩子元素,并且希望插入到特定的一组子节点之前,则此方法将无法工作。
Aurovrata

最初,对我来说,如果有零个child-div元素,这种解决方案也行不通。prepend()将插入到空列表中并创建第一个child-div元素。当然,append()也可以,但是列表是以另一顺序创建的。
罗兰

17

扩展@vabhatia所说的,这就是您想要在本机JavaScript中使用的内容(没有JQuery)。

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



5
parentNode.insertBefore(newChild, refChild)

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

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


字面意义上是从另一个帖子中复制并粘贴的。或许可以参考具体的问题及其相关性?
roberthuttinger

1
parentElement.prepend(newFirstChild);

这是(可能)ES7中的新增功能。现在是香草JS,可能是由于jQuery的流行。目前在Chrome,FF和Opera中可用。直到所有地方都可以使用它时,翻译员才能够处理它。

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

parentElement.prepend('This text!');

链接:developer.mozilla.org - Polyfill


0

在这里需要

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

添加者

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


-1

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


child-div以下没有子节点
Aurovrata

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

这将每个子节点之前插入,即最终将插入多个节点。
Aurovrata
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.