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"
挿入アイテム: class="clsInSpan"
●
実行: id="idInButton"