ywork2020.com

Title

要素のコンテンツの最後にノードを追加する

目次 (INDEX)

appendとは

ここで説明するappend とは次の語句からなるjavascriptのメソッドです。
append
読み: アペンド
意味: 追加、追加する

目次に戻る

appendメソッドの概要

このメソッドは、NodeオブジェクトやDOMStringオブジェクトを要素のコンテンツの最後に追加します。

これは、付加する値がNodeオブジェクトならばエレメントとテキストは同等に挿入されます。 つまり、Nodeオブジェクトならばタグとテキストを認識できますが、String型ではテキストノードとしてしか認識されません。

目次に戻る

構文

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

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

目次に戻る

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

このサンプルでは実行ボタンをクリックすることで、 親要素であるoutput要素のコンテンツの最後にテキストとspan要素を同時に追加します。

サンプルコード: CSS
<style>
	.clsInSpan{
		color: ##orangered;
		margin: 5px;
	}
</style>
サンプルコード: HTML
<body>
	<p><output id="idOutput">[ inner ]</output></p>
	<p>< span class ="clsInSpan">●< /span></p>
	<p><input type="button" value="ボタン" id="idInButton"></p>
</body>
  • 02: output要素 (この要素のコンテンツに挿入アイテムが追加されます。)
  • 03: span要素 (この要素が挿入アイテムです。)
  • 04: input要素 (この要素をクリックするとscriptの関数が実行されます。)
サンプルコード: script
<script>
	let elmOutput = document.getElementById("idOutput");
	let elmInSpan = document.querySelector(".clsInSpan");
	let elmInButton = document.getElementById("idInButton");
	elmInButton.addEventListener("click", function(){
		elmOutput.append(elmInSpan.cloneNode(true), "*insertItem*");
	});
</script>
  • 06: 結果の出力 (appendメソッドでNodeオブジェクトとDOMStringオブジェクトを同時に挿入しています。)
実行結果:

結果: id="idOutput"
[ inner ]

挿入アイテム: class="clsInSpan"

実行: id="idInButton"

目次に戻る