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

Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Метод ParentNode.append добавляет набор объектов Node или DOMString в конец (после последнего потомка) ParentNode. DOMString объекты добавляются как Text.

Отличия от Node.appendChild():

  • ParentNode.append() позволяет добавлять DOMString объекты, в то время как Node.appendChild() принимает только Node.
  • ParentNode.append() возвращает значение, в то время как Node.appendChild() возвращает добавленный объект Node.
  • ParentNode.append() позволяет добавить несколько узлов (node) или строк, в то время как Node.appendChild() может добавть только один узел (node).

Синтаксис

[Throws, Unscopable] 
void ParentNode.append((Node или DOMString)... nodes);

Параметры

nodes
Набор объектов Node или DOMString, которые будут добавлены.

Исключения

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

Примеры

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

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

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

Добавление строки

var parent = document.createElement("div");
parent.append("Вася ест ноздри");

console.log(parent.textContent); // "Вася ест ноздри"

Добавление элемента или строки

var parent = document.createElement("div");
var p = document.createElement("p");
parent.append("Вася уже съел ноздри", p);

console.log(parent.childNodes); // NodeList [ #text "Вася уже съел ноздри", <p> ]

ParentNode.append() не имеет области видимости

Метод append() не имеет области видимости с директивой with. Больше информации в Symbol.unscopables.

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

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

Полифил

Вы можете использовать полифил для метода append() в Internet Explorer 9 и выше:

// Источник: https://github.com/jserz/js_piece/blob/master/DOM/ParentNode/append()/append().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('append')) {
      return;
    }
    Object.defineProperty(item, 'append', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function append() {
        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.appendChild(docFrag);
      }
    });
  });
})([Element.prototype, Document.prototype, DocumentFragment.prototype]);

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

Спецификация Статус Комментарий
DOM
Определение 'ParentNode.append()' в этой спецификации.
Живой стандарт Initial definition.

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

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

Легенда

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

Смотри также

 
 
 
 
 
 
 
and
 
 
 
а также
 
 
Транслитерация
a takzhe
Существительные
 
 
конъюнкция
conjunction
,
and
Наречия
 
 
иначе
otherwise
,
other
,
differently
Союзы
 
 
и
and
 
 
а
and
,
but
 
 
но
but
,
yet
,
only
 
вы использовали 0/500 переводов
 
 
Не переводить по двойному нажатию
 
Не показывать плавающую кнопку
 
Нет подключения к сети Интернет
 
  • Добавить в Разговорник
     
    • Новый список слов для Английский -> Русский...
       
    • Создать новый список слов...
  • Копировать

Метки документа и участники

Внесли вклад в эту страницу: madebydima
Обновлялась последний раз: madebydima,