指定の要素(ノード)の直後に、HTML要素を追加する。

ある指定要素の直後に要素を追加したい。

こういうインプットやHTMLがあった時に、直後に要素を追加したい

<input type="text" placeholder="なにか書いて" /><br>
<a href="#">ここはリンク</a>

<input type="text" placeholder="なにか書いて" /><br>
<span>ここは追加された</span>
<a href="#">ここはリンク</a>

動作サンプル

ここはリンク

アプローチは２つ

1. interface Elementを使う。
2. interface Nodeを使う。

1. Element.insertXXを使う

var e = document.evalue(略)
e.insertAdjacentHTML("afterend","<span>コレはテスト</span>")

こちらはXML的にノードの直前に要素を追加する。

参考資料 →

2.Node.insertBeforeを使う。

insertBeforeで、自分の兄弟ノードで後ろにあるノードの直前に追加すれば、自分の直後に追加したことになる。

var a = document.createElement("a")
a.textContent = "リンク"
a.href = "http://www.yahoo.co.jp"

var e = document.querySelector("#id");
e.parentNode.insertBefore(a, e.nextSibling);

あるノードの直後

ノードの直後に挿入するには insertBeforeを少しとトリッキーに使うことが出来るってのがオモシロイよね。

ノードの最終で後ろにノードがなくてもなんとか動くっぽい。

自分の要素の真後ろを示し、そこに要素を追記するには、HTML・XML的な解決方法があるんですね。

append とか after とかで使えるのはこのおかげですね。

参考資料

• insertAdjacentHTML
• "InsertBefore"