beforeとは
- ここで説明するbefore とは次の語句からなるjavascriptのメソッドです。
- before
- 読み: ビフォー
意味: 前、の前に、以前
beforeメソッドの概要
このメソッドは、ノードの直前にNodeオブジェクトのセット、またはDOMStringオブジェクトのセットを挿入します。
挿入するオブジェクトがNodeの場合は、任意のノードとして挿入され、DOMStringの場合はテキストノードと等価なノードとして挿入されます。
構文
サンプルを見る前に構文を確認しておきます。
Node.before(Node or DOMstring, ...);サンプルコードと実行結果
このサンプルでは、元から有るspan要素の直前にエレメントノードを挿入し、その直前にDOMString(テキストノードと等価)を挿入します。
サンプルコード: CSS
<style>
span{
border: medium solid ##black;
margin: 2.5px;
padding: 5px;
}
#idSpan{
background-color: ##cadetblue;
}
#idBefore{
background-color: ##darkorange;
}
</style>
- 07-09: idSpan (id="idSpan"の要素の背景色を設定します。)
- 10-12: idBefore (id="idBefore"の要素の背景色を設定します。)
サンプルコード: HTML
<body>
< span id="idSpan">span要素 *元要素*< /span>
</body>
- 02: span (元から存在する要素です。識別子はidSpanです。)
サンプルコード: script
<script>
let elmSpan = document.getElementById("idSpan");
let elmBefore = document.createElement("span");
elmBefore.id = "idBefore";
elmBefore.innerText = "span要素 *before*";
let domBefore = "<span>DOMStr</span>";
elmSpan.before(elmBefore,);
elmBefore.before(domBefore);
</script>
- 03: 変数 elmBefore (追加するためのspan要素を作成します。)
- 04: idの設定 (新しく作成した要素の識別子は"idBefore"です。)
- 05: コンテンツの設定 (新しく作成した要素のコンテンツには"span要素 *before*"いうテキストを代入します。)
- 06: 変数 domBefore ("<span>DOMStr</span>"というテキストをDOMStringとして代入します。)
- 07: ノードの追加 (elmBeforeを追加します。)
- 08: ノードの追加 (domBeforeを追加します。)
span要素 *元要素*