ywork2020.com

Title

ノードの直後にノードを挿入する

目次 (INDEX)

afterとは

ここで説明するafter とは次の語句からなるjavascriptのメソッドです。
after
読み: アフター
意味: 後、の後に、後ろに

目次に戻る

afterメソッドの概要

このメソッドは、ノードの直後にNodeオブジェクトのセット、またはDOMStringオブジェクトのセットを挿入します。

挿入するオブジェクトがNodeの場合は、任意のノードとして挿入され、DOMStringの場合はテキストノードと等価なノードとして挿入されます。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

Node.after(Node or DOMstring, ...);

目次に戻る

サンプルコードと実行結果

このサンプルでは、元から有るspan要素の直後にエレメントノードを挿入し、その直後にDOMString(テキストノードと等価)を挿入します。

サンプルコード: CSS
<style>
	span{
		border: medium solid ##black;
		margin: 2.5px;
		padding: 5px;
	}
	#idSpan{
		background-color: ##cadetblue;
	}
	#idAfter{
		background-color: ##darkorange;
	}
</style>
  • 07-09: idSpan (id="idSpan"の要素の背景色を設定します。)
  • 10-12: idAfter (id="idAfter"の要素の背景色を設定します。)
サンプルコード: HTML
<body>
	< span id="idSpan">span要素 *元要素*< /span>
</body>
  • 02: span (元から存在する要素です。識別子はidSpanです。)
サンプルコード: script
<script>
	let elmSpan = document.getElementById("idSpan");
	let elmAfter = document.createElement("span");
	elmAfter.id = "idAfter";
	elmAfter.innerText = "span要素 *after*";
	let domAfter = "<span>DOMStr</span>";
	elmSpan.after(elmAfter,);
	elmAfter.after(domAfter);
</script>
  • 03: 変数 elmAfter (追加するためのspan要素を作成します。)
  • 04: idの設定 (新しく作成した要素の識別子は"idAfter"です。)
  • 05: コンテンツの設定 (新しく作成した要素のコンテンツには"span要素 *after*"いうテキストを代入します。)
  • 06: 変数 domAfter ("<span>DOMStr</span>"というテキストをDOMStringとして代入します。)
  • 07: ノードの追加 (elmAfterを追加します。)
  • 08: ノードの追加 (domAfterを追加します。)
実行結果:
span要素 *元要素*

目次に戻る