From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/api/parentnode/append/index.html | 134 +++++++++++++++++ .../api/parentnode/childelementcount/index.html | 122 ++++++++++++++++ files/ru/web/api/parentnode/children/index.html | 143 ++++++++++++++++++ .../api/parentnode/firstelementchild/index.html | 149 +++++++++++++++++++ files/ru/web/api/parentnode/index.html | 94 ++++++++++++ .../web/api/parentnode/lastelementchild/index.html | 161 +++++++++++++++++++++ files/ru/web/api/parentnode/prepend/index.html | 133 +++++++++++++++++ 7 files changed, 936 insertions(+) create mode 100644 files/ru/web/api/parentnode/append/index.html create mode 100644 files/ru/web/api/parentnode/childelementcount/index.html create mode 100644 files/ru/web/api/parentnode/children/index.html create mode 100644 files/ru/web/api/parentnode/firstelementchild/index.html create mode 100644 files/ru/web/api/parentnode/index.html create mode 100644 files/ru/web/api/parentnode/lastelementchild/index.html create mode 100644 files/ru/web/api/parentnode/prepend/index.html (limited to 'files/ru/web/api/parentnode') diff --git a/files/ru/web/api/parentnode/append/index.html b/files/ru/web/api/parentnode/append/index.html new file mode 100644 index 0000000000..02d0995fc4 --- /dev/null +++ b/files/ru/web/api/parentnode/append/index.html @@ -0,0 +1,134 @@ +--- +title: ParentNode.append() +slug: Web/API/ParentNode/append +translation_of: Web/API/ParentNode/append +--- +
{{APIRef("DOM")}} {{SeeCompatTable}}
+ +

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

+ +

Отличия от {{domxref("Node.appendChild()")}}:

+ + + +

Синтаксис

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

Параметры

+ +
+
nodes
+
Набор объектов {{domxref("Node")}} или {{domxref("DOMString")}}, которые будут добавлены.
+
+ +

Исключения

+ + + +

Примеры

+ +

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

+ +
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. Больше информации в {{jsxref("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]);
+ +

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

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-parentnode-append', 'ParentNode.append()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

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

+ + + +

{{Compat("api.ParentNode.append")}}

+ +

Смотри также

+ + diff --git a/files/ru/web/api/parentnode/childelementcount/index.html b/files/ru/web/api/parentnode/childelementcount/index.html new file mode 100644 index 0000000000..6dcc3711dd --- /dev/null +++ b/files/ru/web/api/parentnode/childelementcount/index.html @@ -0,0 +1,122 @@ +--- +title: Node.childElementCount +slug: Web/API/ParentNode/childElementCount +tags: + - API + - DOM + - ParentNode + - Property + - Reference +translation_of: Web/API/ParentNode/childElementCount +--- +
+

{{ APIRef("DOM") }}

+ +

Свойство Node.childElementCount предназначено только для чтения и возвращает число дочерних элементов узла.

+
+ +

Синтакисис

+ +
var elCount = Node.childElementCount;
+
+ + + +
+

А наш добрый друг Internet Explorer в 6, 7 и 8 версиях ошибочно считает элементами комментарии в HTML-коде ({{domxref("Comment")}}).

+
+ +

Пример

+ +
var foo = document.getElementById("foo");
+if (foo.childElementCount > 0) {
+    // здесь нужный код..
+}
+ +

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

+ + + + + + + + + + + + + + + + +
СпецификацияСтатус
{{SpecName('DOM WHATWG', '#dom-parentnode-childElementCount', 'ParentNode.childElementCount')}}{{Spec2('DOM WHATWG')}}
{{SpecName('Element Traversal', '#attribute-childElementCount', 'ElementTraversal.childElementCount')}}{{Spec2('Element Traversal')}}
+ +

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

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка {{domxref("Element")}}1.0{{CompatGeckoDesktop("1.9.1")}}9.0 [1]10.04.0
Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка {{domxref("Element")}}{{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
diff --git a/files/ru/web/api/parentnode/children/index.html b/files/ru/web/api/parentnode/children/index.html new file mode 100644 index 0000000000..e810a39465 --- /dev/null +++ b/files/ru/web/api/parentnode/children/index.html @@ -0,0 +1,143 @@ +--- +title: Node.children +slug: Web/API/ParentNode/children +tags: + - API + - DOM + - ParentNode + - Property + - Reference +translation_of: Web/API/ParentNode/children +--- +

{{ APIRef("DOM") }}

+ +

Описание

+ +

Свойство children {{domxref("ParentNode")}} является свойством только для чтения, которое возвращает {{domxref("HTMLCollection")}}, содержащее все дочерние {{domxref("Element", "elements")}} узла, на котором он был вызван.

+ +

Синтаксис

+ +
var elList = elementNodeReference.children;
+ +

В результате, elList - живая коллекция, состоящая из дочерних элементов узла elementNodeReference, и стоит подметить, что если у узла детей нет, она будет пустой. Определить это можно, обратившись к свойству length, которое содержит в себе количество элементов в коллекции.

+ +

Пример

+ +
<ul>
+   <li>1 пункт</li>
+   <li>2 пункт</li>
+</ul>
+
+<script type="text/javascript">
+
+   var elementChildrens = document.querySelector("ul").children;
+   for (var i=0, child; child=elementChildrens[i]; i++) {
+        //elementChildrens - коллеция детей списка
+        //child - последовательно, каждый из элементов elementChildrens
+        alert(child.innerHTML);
+   }
+
+</script>
+
+
+ +

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

+ + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-parentnode-children', 'ParentNode.children')}}{{Spec2('DOM WHATWG')}}Начальное определение.
+ +

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

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка {{domxref("Element")}}1.0{{CompatGeckoDesktop("1.9.1")}}9.0 [1]10.04.0
+

Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}

+ 		29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
Поддержка {{domxref("SVGElement")}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatNo}}{{CompatUnknown}}{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
ОсобенностьAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка {{domxref("Element")}}{{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

Internet Explorer 6, 7 и 8 поддерживают данное свойство, но ошибочно включают в коллекцию комментарии ({{domxref("Comment")}}) в HTML-коде.

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/parentnode/firstelementchild/index.html b/files/ru/web/api/parentnode/firstelementchild/index.html new file mode 100644 index 0000000000..472732452a --- /dev/null +++ b/files/ru/web/api/parentnode/firstelementchild/index.html @@ -0,0 +1,149 @@ +--- +title: ParentNode.firstElementChild +slug: Web/API/ParentNode/firstElementChild +tags: + - API + - DOM + - ParentNode + - Property + - Reference +translation_of: Web/API/ParentNode/firstElementChild +--- +

{{ APIRef("DOM") }}

+ +

Доступное только для чтения свойство ParentNode.firstElementChild возвращает первый дочерный элемент объекта ({{domxref("Element")}}) или null если дочерних элементов нет.

+ +
+

This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, firstElementChild moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.

+
+ +

Синтаксис

+ +
var childNode = elementNodeReference.firstElementChild;
+
+ +

Пример

+ +
<p id="para-01">
+  <span>First span</span>
+</p>
+
+<script type="text/javascript">
+  var p01 = document.getElementById('para-01');
+  alert(p01.firstElementChild.nodeName)
+</script>
+ +

В этом примере alert показывает 'span', что является именем тега первого дочернего узла элемента p.

+ +

Polyfill для Internet Explorer 8

+ +

Это свойство не поддерживается браузером Internet Explorer вплоть до 9 версии, поэтому следующий сниппет может быть использован для добавления поддержки IE8:

+ +
// Source: https://github.com/Alhadis/Snippets/blob/master/js/polyfills/IE8-child-elements.js
+if(!("firstElementChild" in document.documentElement)){
+    Object.defineProperty(Element.prototype, "firstElementChild", {
+        get: function(){
+            for(var nodes = this.children, n, i = 0, l = nodes.length; i < l; ++i)
+                if(n = nodes[i], 1 === n.nodeType) return n;
+            return null;
+        }
+    });
+}
+ +

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

+ + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ChildNode")}} and ParentNode. This method is now defined on the latter.
+ The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.
{{SpecName('Element Traversal', '#attribute-firstElementChild', 'ElementTraversal.firstElementChild')}}{{Spec2('Element Traversal')}}Added its initial definition to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Базовая поддержка ({{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Базовая поддержка ({{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Поддержка {{domxref("Document")}} и {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +

Смотрите также

+ + diff --git a/files/ru/web/api/parentnode/index.html b/files/ru/web/api/parentnode/index.html new file mode 100644 index 0000000000..33f9ee9ddb --- /dev/null +++ b/files/ru/web/api/parentnode/index.html @@ -0,0 +1,94 @@ +--- +title: ParentNode +slug: Web/API/ParentNode +tags: + - API + - DOM + - NeedsTranslation + - Tab + - TopicStub +translation_of: Web/API/ParentNode +--- +

{{ APIRef("DOM") }}

+ +

Интерфейс ParentNode содержит методы, которые относятся к {{domxref("Node")}} объектам , у которых могут быть потомки.

+ +

ParentNode является сырым интерфейсом и объекты с данным типом создать нельзя; данный интерфейс имеется у {{domxref("Element")}}, {{domxref("Document")}}, и {{domxref("DocumentFragment")}} объектов.

+ +

Свойства

+ +
+
{{domxref("ParentNode.children")}} {{experimental_inline}} {{readonlyInline}}
+ Возвращает живую  {{domxref("HTMLCollection")}}, которая содержит все объекты типа {{domxref("Element")}}, которые являются потомками данного ParentNode.
+
+ {{domxref("ParentNode.firstElementChild")}} {{experimental_inline}} {{readonlyInline}}
+ Возвращает {{domxref("Element")}} , который является первым потомком данного ParentNode, или null, если таковой отсутствует.
+
+ {{ domxref("ParentNode.lastElementChild") }} {{experimental_inline}} {{readonlyInline}}
+ Возвращает {{domxref("Element")}}, который является последним из потомков данного ParentNode, или null, если таковой отсутствует.
+
+ {{ domxref("ParentNode.childElementCount") }} {{experimental_inline}} {{readonlyInline}}
+ Возвращает unsigned long с количеством потомков, которые есть у объекта.
+
+ +

Методы

+ +
+
{{domxref("ParentNode.append()")}} {{experimental_inline}}
+
Вставляет набор объектов типа {{domxref("Node")}} или {{domxref("DOMString")}} после последнего потомка ParentNode. {{domxref("DOMString")}} объекты вставлены как эквивалент {{domxref("Text")}} узлы.
+
{{domxref("ParentNode.prepend()")}} {{experimental_inline}}
+
Вставляет набор объектов типа {{domxref("Node")}} или {{domxref("DOMString")}} перед первым потомком ParentNode. {{domxref("DOMString")}} объекты вставлены как эквивалент {{domxref("Text")}} узлы.
+
{{domxref("ParentNode.querySelector()")}}
+
Возвращает первый {{domxref("Element")}} с текущим элементом в качестве источника, который совпадает с определённой группой селекторов.
+
{{domxref("ParentNode.querySelectorAll()")}}
+
Возвращает {{domxref("NodeList")}}, который представляет собой список элементов с текущим элементом в качестве источника, который совпадает с определённой группой селекторов.
+
+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('DOM WHATWG', '#parentnode', 'ParentNode')}}{{Spec2('DOM WHATWG')}}Добавлены методы append() и prepend().
{{SpecName('DOM WHATWG', '#dom-parentnode-firstelementchild', 'ParentNode.firstElementChild')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ChildNode")}} and ParentNode. The firstElementChild, lastElementChild, and childElementCount properties are now defined on the latter.
+ The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.
+ Added the children property.
+ Added the append() and prepend() methods.
{{SpecName('Element Traversal', '#interface-elementTraversal', 'ElementTraversal')}}'{{Spec2('Element Traversal')}}Добавлено изначальное определение свойств в ElementTraversal чистый интерфейс и использование его в {{domxref("Element")}}.
+ +

Совместимость с браузерами

+ + + +

{{Compat("api.ParentNode")}}

+ +

 

+ +

Смотрите также

+ + diff --git a/files/ru/web/api/parentnode/lastelementchild/index.html b/files/ru/web/api/parentnode/lastelementchild/index.html new file mode 100644 index 0000000000..d625dc316f --- /dev/null +++ b/files/ru/web/api/parentnode/lastelementchild/index.html @@ -0,0 +1,161 @@ +--- +title: ParentNode.lastElementChild +slug: Web/API/ParentNode/lastElementChild +tags: + - API + - DOM + - ParentNode + - Property + - Reference +translation_of: Web/API/ParentNode/lastElementChild +--- +

{{ APIRef("DOM") }}

+ +

Свойство ParentNode.lastElementChild только для чтения. Возвращает последний дочерний элемент объекта или null если нет дочерних элементов.

+ +
+

This property was initially defined in the {{domxref("ElementTraversal")}} pure interface. As this interface contained two distinct set of properties, one aimed at {{domxref("Node")}} that have children, one at those that are children, they have been moved into two separate pure interfaces, {{domxref("ParentNode")}} and {{domxref("ChildNode")}}. In this case, lastElementChild moved to {{domxref("ParentNode")}}. This is a fairly technical change that shouldn't affect compatibility.

+
+ +

Синтаксис

+ +
var element = node.lastElementChild;
+ +

Пример

+ +
<ul id="foo">
+  <li>First  (1)</li>
+  <li>Second (2)</li>
+  <li>Third  (3)</li>
+</ul>
+
+<script>
+var foo = document.getElementById('foo');
+// yields: Third  (3)
+console.log(foo.lastElementChild.textContent);
+</script>
+
+ +

Polyfill for IE8, IE9 and Safari

+ +
// Overwrites native 'lastElementChild' prototype.
+// Adds Document & DocumentFragment support for IE9 & Safari.
+// Returns array instead of HTMLCollection.
+;(function(constructor) {
+    if (constructor &&
+        constructor.prototype &&
+        constructor.prototype.lastElementChild == null) {
+        Object.defineProperty(constructor.prototype, 'lastElementChild', {
+            get: function() {
+                var node, nodes = this.childNodes, i = nodes.length - 1;
+                while (node = nodes[i--]) {
+                    if (node.nodeType === 1) {
+                        return node;
+                    }
+                }
+                return null;
+            }
+        });
+    }
+})(window.Node || window.Element);
+
+ +

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

+ + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-lastelementchild', 'ParentNode.lastElementChild')}}{{Spec2('DOM WHATWG')}}Splitted the ElementTraversal interface in {{domxref("ChildNode")}} and ParentNode. This method is now defined on the latter.
+ The {{domxref("Document")}} and {{domxref("DocumentFragment")}} implemented the new interfaces.
{{SpecName('Element Traversal', '#attribute-lastElementChild', 'ElementTraversal.lastElementChild')}}{{Spec2('Element Traversal')}}Added its initial definition to the ElementTraversal pure interface and use it on {{domxref("Element")}}.
+ +

Совместимость с браузерами

+ +

{{ CompatibilityTable() }}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support (on {{domxref("Element")}})1.0{{CompatGeckoDesktop("1.9.1")}}9.010.04.0
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}29.0{{CompatGeckoDesktop("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support (on {{domxref("Element")}}){{ CompatVersionUnknown() }}{{CompatGeckoMobile("1.9.1")}}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}{{ CompatVersionUnknown() }}
Support on {{domxref("Document")}} and {{domxref("DocumentFragment")}} {{experimental_inline}}{{CompatVersionUnknown}}{{CompatGeckoMobile("25.0")}}{{CompatNo}}16.0{{CompatNo}}
+
+ + + +

Так же смотрите

+ + diff --git a/files/ru/web/api/parentnode/prepend/index.html b/files/ru/web/api/parentnode/prepend/index.html new file mode 100644 index 0000000000..709a620f85 --- /dev/null +++ b/files/ru/web/api/parentnode/prepend/index.html @@ -0,0 +1,133 @@ +--- +title: ParentNode.prepend() +slug: Web/API/ParentNode/prepend +translation_of: Web/API/ParentNode/prepend +--- +
{{APIRef("DOM")}}
+ +

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

+ +

Синтаксис

+ +
ParentNode.prepend(...nodesToPrepend);
+
+ +

Параметры

+ +
+
nodesToPrepend
+
Один или болле узлов, которые вставляются перед первым дочерним узлом в  ParentNode. Каждый узел может быть определен либо как {{domxref("Node")}} - объект, либо как строка; строки вставляются как новые узлы типа {{domxref("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. Смотрите {{jsxref("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]);
+ +

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

+ + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-parentnode-prepend', 'ParentNode.prepend()')}}{{Spec2('DOM WHATWG')}}Initial definition.
+ +

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

+ + + +

{{Compat("api.ParentNode.prepend")}}

+ +

Смотри также

+ + -- cgit v1.2.3-54-g00ecf