ChildNode.before()
ChildNode.before()
は ChildNode
の親の子リストの、ChildNode
の直前に、 Node
または DOMString
オブジェクトのセットを挿入します。 DOMString
オブジェクトは Text
ノードと等価なノードとして挿入されます。
構文
[Throws, Unscopable] void ChildNode.before((Node or DOMString)... nodes);
パラメーター
例外
HierarchyRequestError
: ノードは階層の指定の位置には挿入できません。
例
要素の挿入
var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");
child.before(span);
console.log(parent.outerHTML);
// "<div><span></span><p></p></div>"
テキストの挿入
var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
child.before("Text");
console.log(parent.outerHTML);
// "<div>Text<p></p></div>"
要素とテキストの挿入
var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");
child.before(span, "Text");
console.log(parent.outerHTML);
// "<div><span></span>Text<p></p></div>"
ChildNode.before()
はスコーピングに非対応
before()
メソッドは with
文でのスコーピングに対応していません。詳細は Symbol.unscopables
をご覧ください。
with(node) {
before("foo");
}
// ReferenceError: before is not defined
ポリフィル
以下のポリフィルで、 Internet Explorer 9 以降でも before()
メソッドが利用できます。
// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md
(function (arr) {
arr.forEach(function (item) {
if (item.hasOwnProperty('before')) {
return;
}
Object.defineProperty(item, 'before', {
configurable: true,
enumerable: true,
writable: true,
value: function before() {
var argArr = Array.prototype.slice.call(arguments),
docFrag = document.createDocumentFragment();
argArr.forEach(function (argItem) {
var isNode = argItem instanceof Node;
docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
});
this.parentNode.insertBefore(docFrag, this);
}
});
});
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);
仕様
仕様書 | 策定状況 | コメント |
---|---|---|
DOM ChildNode.before() の定義 |
現行の標準 | 初期定義 |
ブラウザー実装状況
BCD tables only load in the browser