ある指定要素の直後に要素を追加したい。
こういうインプットやHTMLがあった時に、直後に要素を追加したい
< input type = "text" placeholder= "なにか書いて" />< br >
< a href = "#" > ここはリンク </ a >
< input type = "text" placeholder= "なにか書いて" />< br >
< span > ここは追加された</ span >
< a href = "#" > ここはリンク </ a >
動作サンプル
ここはリンク
アプローチは2つ
interface Elementを使う。
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 とかで使えるのはこのおかげですね。
参考資料