最初の子として要素を挿入する方法は?


95

ボタンをクリックするたびに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要素の空のリストでも機能します。すごい!
Roland

回答:


161

$.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()も機能しますが、リストは別の順序で作成されます。
Roland

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の新しい追加機能です。それはおそらくjQueryでの人気のため、今ではバニラJSです。現在、Chrome、FF、Operaで利用できます。トランスパイラーは、どこでも利用できるようになるまで、それを処理できる必要があります。

PSあなたは直接文字列を付加することができます

parentElement.prepend('This text!');

リンク:developer.mozilla.org - ポリフィル


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

これは、各子のに挿入されます。つまり、複数のノードを挿入することになります。
Aurovrata
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.