web-dev-qa-db-ja.com

jQueryを使用してdiv内にdivを動的に追加する方法。最初に表示する必要がありますか？

このような親divがあります。

<div id='parent'>
   <div id='child_1'>........</div>
   <div id='child_2'>........</div>
   <div id='child_3'>........</div>
   <div id='child_4'>........</div>
</div>

次のようなdivを1つ追加します。

<div id='page_number'> You are watching 5th object out of 100 </div>

親div内では、そのようにするためにappendを使用しています。

$("#parent").append("<div id='page_number'> You are watching 5th object out of 100 </div>");

しかし、child_4番目のdivの後に来ます。ただし、child_1のすぐ下に表示する必要があります。このようになるはずです

<div id='parent'>
   <div id='page_number'> You are watching 5th object out of 100 </div>
   <div id='child_1'>........</div>
   <div id='child_2'>........</div>
   <div id='child_3'>........</div>
   <div id='child_4'>........</div>
</div>

どうすればこのようにできますか。

jqueryjquery-uidynamichtml
24
DEVOPS

jquery関数を利用します .prepend() ：パラメータで指定されたコンテンツを、一致した要素のセットの各要素の先頭に挿入します

$('Selector ').prepend($('<div> new div </div>'));
42
Pranay Rana

appendの代わりにprependを使用します。

$("#parent").prepend("<div id='page_number'> You are watching 5th object out of 100 </div>");
11
Hadas

append（） の代わりに prepend（） を使用します。

$("#parent").prepend(
    "<div id='page_number'> You are watching 5th object out of 100 </div>");
5
Frédéric Hamidi

$("#parent").append("")が選択した要素の最後にdivを追加するを参照してください。..divsを親の最初の子として追加する場合は、prependを試してください...

$("#parent").prepend("");
3
Abdullah Khan

他の回答で言及されている.prepend（）コマンドを使用するだけでなく、 。prependTo（） コマンドも使用できます。

$("<div id='page_number'>You are watching 5th object out of 100 </div>").prependTo("#parent");
2
Harag

「追加」を探しています：

Apiを追加

$("#parent").prepend(Your HTML)
1
Mario Corchero