jQueryのappendやbeforeでDOMを操作し、html要素に複数追加する

jQueryのappendやbeforeでDOMを操作し、html要素に複数追加する

jQueryのprependやappend、before、afterでDOMを操作し、html要素に位置を指定して複数追加したり、入れ子にする方法。

jQuery関連記事

関連記事をもっとみる

デモを用意しました。

【jQuery】appendやbeforeなどのDOMを操作して要素の複数挿入する

1.要素の前に追加する.before()

html

<div class="wrap">
    <div id="result1"><p>基準の位置</p></div>
</div>

JavaScript

$('#result1').before('<p>before</p>');

結果

<div class="wrap">
<p>before</p>
<div id="result1"><p>基準の位置</p></div>
</div>

idのresult1と同階層で、指定要素の前に挿入されました。

2.要素の後に追加する.after()

html

<div class="wrap">
    <div id="result2"><p>基準の位置</p></div>
</div>

JavaScript

$('#result2').after('<p>after</p>');

結果

<div class="wrap">
<div id="result2"><p>基準の位置</p></div>
<p>after</p>
</div>

idのresult2と同階層で、指定要素の後ろに挿入されました。

3.要素内の先頭に挿入する.prepend()

html

<ul id="result3"><li>基準の位置</li></ul>

JavaScript

$('#result3').prepend('<li>prepend</li>');

結果

<ul id="result3">
<li>prepend</li>
<li>基準の位置</li>
</ul>

idのresult3の要素内で、指定要素の先頭に挿入されました。

4.要素内の最後に挿入する.append()

html

<ul id="result4"><li>基準の位置</li></ul>

JavaScript

$('#result4').append('<li>append</li>');

結果

<ul id="result4">
<li>基準の位置</li>
<li>append</li>
</ul>

idのresult4の要素内で、指定要素の最後に挿入されました。

5.appendで複数追加する

html

<div id="result5" class="wrap">基準の位置</div>

JavaScript

$('#result5').append('<div class="one">','<div class="two">2番目</div>');

結果

<div id="result5" class="wrap">
基準の位置
<div class="one"></div>
<div class="two">2番目</div>
</div>

.append()で複数の引数として追加したい要素を指定すると、
idのresult5の最後に引数と同じ順番で挿入されました。

要素のみの追加であれば要素の閉じタグは必要ありません。

6.appendで追加した要素の中にさらに要素を追加する

html

<div id="result6" class="wrap">基準の位置</div>

JavaScript

$('#result6').append('<div class="one2">')
    .children('div.one2').append('<div class="two">2番目</div>');

結果

<div id="result6" class="wrap">
基準の位置
<div class="one2">
<div class="two">2番目</div>
</div>
</div>

「5.appendで複数追加する」と同じように.one2を挿入し、
その要素内にさらに.append()で要素を挿入しています。

.append().append()のようにを2つつなげると5.と同じ動作をしたので追加要素の子要素にしたかったので.append().children('div.one2').append()の形にしたらできました。

【jQuery】appendやbeforeなどのDOMを操作して要素の複数挿入する

コメント

タイトルとURLをコピーしました