web-dev-qa-db-ja.com

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

ボタンをクリックするたびに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>
jqueryprependcss-selectors
83
Rana Imtiaz

$.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" />
142
Mohamed Nuur

@vabhatiaが言ったことを拡張すると、これは（JQueryなしの）ネイティブJavaScriptに必要なものです。

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

10
dtsn

使用：$("<p>Test</p>").prependTo(".inner");チェックアウト 。jquery.comの.prependドキュメント

7
WizxX20
parentNode.insertBefore(newChild, refChild)

ノードnewChildを、既存の子ノードrefChildの前にparentNodeの子として挿入します。 （newChildを返します。）

RefChildがnullの場合、newChildは子のリストの最後に追加されます。同様に、より読みやすく、parentNode.appendChild（newChild）を使用します。

5
Varun Bhatia
parentElement.prepend(newFirstChild);

これは（おそらく）ES7の新しい追加です。おそらくjQueryで人気があるため、現在はVanilla JSです。現在、Chrome、FF、およびOperaで利用できます。トランスパイラーは、どこでも利用可能になるまでそれを処理できる必要があります。

追伸文字列を直接追加できます

parentElement.prepend('This text!');

リンク： developer.mozilla.org - Polyfill

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

ここで必須

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

によって追加

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

0
Chintan7027