ParentNode.prepend()

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

Метод ParentNode.prepend() вставляет множество объектов Node или DOMString в начало (перед первым потомком) ParentNode. Объекты DOMString вставляются как Text.

Синтаксис

ParentNode.prepend(...nodesToPrepend);

Параметры

nodesToPrepend
Один или болле узлов, которые вставляются перед первым дочерним узлом в  ParentNode. Каждый узел может быть определен либо как Node - объект, либо как строка; строки вставляются как новые узлы типа Text.

Возвращаемое значение

undefined.

Исключения

  • HierarchyRequestError: Узел не может быть вставлен в указанную позицию данной иерархии.

Примеры

Добавление элемента в начало

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]);

Спецификация

Specification Status Comment
DOM
Определение 'ParentNode.prepend()' в этой спецификации.
Живой стандарт Initial definition.

Поддержка браузерами

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
prepend
Экспериментальная
Chrome Полная поддержка 54Edge Полная поддержка 17Firefox Полная поддержка 49IE Нет поддержки НетOpera Полная поддержка 39Safari Полная поддержка 10WebView Android Полная поддержка 54Chrome Android Полная поддержка 54Firefox Android Полная поддержка 49Opera Android Полная поддержка 41Safari iOS Полная поддержка 10Samsung Internet Android Полная поддержка 6.0

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Экспериментальная. Ожидаемое поведение может измениться в будущем.
Экспериментальная. Ожидаемое поведение может измениться в будущем.

Смотри также