ParentNode.prepend()

ParentNode.prepend() メソッドは、Node オブジェクトまたは DOMString オブジェクトのセットを ParentNode の最初の子の前に挿入します。 DOMString オブジェクトは、同等の Text ノードとして挿入されます。

構文

ParentNode.prepend(...nodesToPrepend);

パラメータ

nodesToPrepend
現在 ParentNode にある最初の子ノードの前に挿入する1つ以上のノード。各ノードは Node オブジェクトまたは文字列として指定できます。文字列は新しい Text ノードとして挿入されます。

戻り値

undefined.

例外

要素の前につける

var parent = document.createElement("div");
var p = document.createElement("p");
var span = document.createElement("span");
parent.append(p);
parent.prepend(span);

console.log(parent.childNodes); // NodeList [ <span>, <p> ]

テキストの前につける

var parent = document.createElement("div");
parent.append("Some text");
parent.prepend("Headline: ");

console.log(parent.textContent); // "Headline: Some text"

要素とテキストを追加する

var parent = document.createElement("div");
var p = document.createElement("p");
parent.prepend("Some text", p);

console.log(parent.childNodes); // NodeList [ #text "Some text", <p> ]

ParentNode.prepend() はスコープされません

prepend() メソッドは with ステートメントにスコープされていません。詳細については Symbol.unscopables を参照してください。

var parent = document.createElement("div");

with(parent) { 
  prepend("foo");
}
// ReferenceError: prepend is not defined 

ポリフィル

prepend() メソッドが利用できない場合は、ポリフィルができます:

// Source: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/prepend()/prepend().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('prepend')) {
      return;
    }
    Object.defineProperty(item, 'prepend', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function prepend() {
        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.insertBefore(docFrag, this.firstChild);
      }
    });
  });
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);

仕様

仕様書 ステータス コメント
DOM
ParentNode.prepend() の定義
現行の標準 初期定義

ブラウザの互換性

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

凡例

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

あわせて参照