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

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

jQuery関連記事

• 

  【jQuery】pdfが存在するか、mimeタイプのバリデーションする

• 

  jQuery UIのsortableを使ってリストをドラッグで並び替える

• 

  jQueryのモーダルウィンドウを使ってフォームの確認画面を実装する

• 

  HTMLのcanvasタグとJavaScriptで円グラフの画像をつくる

• 

  bxSliderをカルーセルやコンテンツスライダーなど便利なサンプル5種

• 

  bxSliderの使い方と、オプションでのカスタマイズ方法

• 

  select・optionタグをjQueryで、プルダウンの選択値を取得、変更する

• 

  jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する

• 

  jQueryでrequiredの専用エラー文と文字数制限のバリデーションをつくる

デモを用意しました。

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

mugenweb-note.com

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

html

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

JavaScript

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

結果

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

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

html

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

JavaScript

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

結果

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

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

html

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

JavaScript

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

結果

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

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

html

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

JavaScript

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

結果

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

5.appendで複数追加する

html

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

JavaScript

$('#result5').append('<div class="one">','<div class="two">2番目</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>');

結果

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

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

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

mugenweb-note.com