ChildNode.before()

ChildNode.before()ChildNode の親の子リストの、ChildNode の直前に、 Node または DOMString オブジェクトのセットを挿入します。 DOMString オブジェクトは Text ノードと等価なノードとして挿入されます。

構文

[Throws, Unscopable] 
void ChildNode.before((Node or DOMString)... nodes);

パラメーター

nodes
Node または DOMString オブジェクトのセットを挿入します。

例外

要素の挿入

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() の定義
現行の標準 初期定義

ブラウザー実装状況

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
before
実験的
Chrome 完全対応 54Edge 完全対応 17Firefox 完全対応 49IE 未対応 なしOpera 完全対応 39Safari 完全対応 10WebView Android 完全対応 54Chrome Android 完全対応 54Firefox Android 完全対応 49Opera Android 完全対応 41Safari iOS 完全対応 10Samsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。

関連情報