prependとは
- ここで説明するprepend とは次の語句からなるjavascriptのメソッドです。
- prepend
- 読み: プリペンド、プレペンド
意味: 付加、付加する
prependメソッドの概要
このメソッドは、NodeオブジェクトやDOMStringオブジェクトを要素のコンテンツの最初に付加します。
これは、付加する値がNodeオブジェクトならばエレメントとテキストは同等に挿入されます。 つまり、Nodeオブジェクトならばタグとテキストを認識できますが、String型ではテキストノードとしてしか認識されません。
構文
サンプルを見る前に構文を確認しておきます。
Node.prepend(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.prepend(elmInSpan.cloneNode(true), "*insertItem*");
});
</script>
- 06: 結果の出力 (prependメソッドでNodeオブジェクトとDOMStringオブジェクトを同時に挿入しています。)
結果: id="idOutput"
挿入アイテム: class="clsInSpan"
●
実行: id="idInButton"