Elementエレメント.beforeビフォー メソッド

本ページには広告が含まれています。

指定された要素の子要素リストの直前に、一つ以上のNodeオブジェクトやDOMStringを追加します。

beforeメソッドはIE11以降ではエラーとなり使用することができませんが、Element.insertAdjacentHTML メソッドの第一引数にbeforebeginを指定することで同じ動作を行うことができます。

使用不可
この機能はIE11以降では使用不可となっています。
構文
Element.before( nodes )
引数
nodes 省略可
追加する要素もしくはHTML文字列
戻り値

Element オブジェクトを返すメソッド・プロパティ

Document.before (DOM)
tagNameで指定したHTML要素、あるいはtagNameを認識できない場合HTMLUnknownElementを生成します。
Document.before (DOM)
指定したタグ名およびネームスペースURIで、新しい要素を生成します。
Document.getElementById メソッド (DOM)
特定のidを持つエレメントへのオブジェクト参照を返します。
Document.before (DOM)
指定したセレクターに一致する、文書内で最初の要素ノードを返します。
Document.before (DOM)
文書の直接の子であるElementを返します。HTML文書では、これは通常は文書のhtml要素を表すHTMLElementオブジェクトになります。
HTMLCollection.before (DOM)
HTMLコレクション内のインデックス番号で指定された位置にある要素を取得します。存在しないインデックス番号を指定した場合は、NOTHINGを返します。
HTMLCollection.before (DOM)
引数に指定されたidを持つ要素を取得します。要素が見つからない場合NOTHINGを返します。
Element.closest メソッド
指定された CSSセレクタ に最も近い祖先要素を返します。
Attr.before (DOM)
属性が所属する要素を返します。

使い方

IDにcontainerを持つ要素の前に、テキストの内容が「新しい段落」のp要素を追加します。

HTML
<div id="container">
	<p>最初の段落</p>
	<p>2番目の段落</p>
</div>
UWSC
DIM Document = IE.Document
DIM container = Document.getElementById("container")

DIM newElement = document.createElement("p")
newElement.textContent = "新しい段落"
DIM Element = container.firstElementChild
Element.before(newElement)
結果
HTML
<div id="container">
	<p>新しい段落</p>
	<p>最初の段落</p>
	<p>2番目の段落</p>
</div>

関連記事

Element.append メソッド (DOM)
指定された要素の子要素リストの末尾に、一つ以上のNodeオブジェクトやDOMStringを追加します。
Element.insertAdjacentHTML メソッド (DOM)
指定されたHTML文字列を現在の要素の前後、または内部に挿入します。
Element.prepend メソッド (DOM)
指定された要素の子要素リストの先頭に、一つ以上のNodeオブジェクトやDOMStringを追加します。