jQueryで親要素のN番目にコンテンツを追加する

jQuery を使って「ある要素」の「N 番目」に任意のコンテンツを追加するメモ。

一覧表示してるリスト等に異なる物を後から表示したくなる事が多々あるので調べてみました。

HTML はこんな感じ。HTML を弄ることなく好きな場所にコンテンツを追加したい。

<div id="parent">
  <div class="child">...</div>
  <div class="child">...</div>
  <div class="child">...</div>
</div>

まずは #parent 直下に追加する場合。

$("#parent").before("<div>追加</div>");

次は 2 番目の .child の後に追加する場合。

$("#parent :nth-of-type(2)").append("<div>追加</div>");

ここに指定する数値は固定値の他、偶数、奇数等かなり細かく指定出来たりするので便利。

で、最後は jQuery を使わずに同じもの書いてみる。

var e = document.getElementById("parent");
var html = document.createElement("div");
html.textContent = '追加';  
e.insertBefore(html, e.children[0]);

これで #parent の直後に追加される。

jQuery 使えるならそっちの方が絶対楽ですね。