From bd5cb714a9b6278c6054aed8eb62c216f4ac0897 Mon Sep 17 00:00:00 2001 From: Florian Scholz Date: Fri, 16 Apr 2021 15:53:02 +0200 Subject: [PATCH] Demix Parentnode.{append,prepend} to Element, Document, DocumentFragment pages (#4163) * Move ParentNode.append to Element.append and update Element.append * Update Element method list to add append * Add Document.append * Add DocumentFragment.append * Update links to ParentNode.append and ParentNode.prepend * Move ParentNode.prepend to Element.prepend and update Element.prepend * Add Document.prepend * Add DocumentFragment.prepend page --- files/en-us/_redirects.txt | 2 + files/en-us/_wikihistory.json | 84 +++++----- .../en-us/web/api/childnode/after/index.html | 3 +- .../en-us/web/api/childnode/before/index.html | 3 +- .../en-us/web/api/document/append/index.html | 88 ++++++++++ files/en-us/web/api/document/index.html | 4 + .../en-us/web/api/document/prepend/index.html | 88 ++++++++++ .../api/documentfragment/append/index.html | 77 +++++++++ .../en-us/web/api/documentfragment/index.html | 4 + .../api/documentfragment/prepend/index.html | 79 +++++++++ files/en-us/web/api/element/append/index.html | 117 ++++++++++++++ files/en-us/web/api/element/index.html | 4 + .../en-us/web/api/element/prepend/index.html | 112 +++++++++++++ .../en-us/web/api/node/appendchild/index.html | 4 +- .../web/api/node/insertbefore/index.html | 2 +- .../web/api/parentnode/append/index.html | 151 ------------------ .../web/api/parentnode/prepend/index.html | 147 ----------------- .../api/parentnode/replacechildren/index.html | 5 +- files/en-us/web/api/xmlserializer/index.html | 2 +- 19 files changed, 625 insertions(+), 351 deletions(-) create mode 100644 files/en-us/web/api/document/append/index.html create mode 100644 files/en-us/web/api/document/prepend/index.html create mode 100644 files/en-us/web/api/documentfragment/append/index.html create mode 100644 files/en-us/web/api/documentfragment/prepend/index.html create mode 100644 files/en-us/web/api/element/append/index.html create mode 100644 files/en-us/web/api/element/prepend/index.html delete mode 100644 files/en-us/web/api/parentnode/append/index.html delete mode 100644 files/en-us/web/api/parentnode/prepend/index.html diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 30290eb57c0ecc3..a274d6167340311 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -8457,10 +8457,12 @@ /en-US/docs/Web/API/ParentNode.children /en-US/docs/Web/API/Element/children /en-US/docs/Web/API/ParentNode.firstElementChild /en-US/docs/Web/API/Element/firstElementChild /en-US/docs/Web/API/ParentNode.lastElementChild /en-US/docs/Web/API/Element/lastElementChild +/en-US/docs/Web/API/ParentNode/append /en-US/docs/Web/API/Element/append /en-US/docs/Web/API/ParentNode/childElementCount /en-US/docs/Web/API/Element/childElementCount /en-US/docs/Web/API/ParentNode/children /en-US/docs/Web/API/Element/children /en-US/docs/Web/API/ParentNode/firstElementChild /en-US/docs/Web/API/Element/firstElementChild /en-US/docs/Web/API/ParentNode/lastElementChild /en-US/docs/Web/API/Element/lastElementChild +/en-US/docs/Web/API/ParentNode/prepend /en-US/docs/Web/API/Element/prepend /en-US/docs/Web/API/PasswordCredential/additionalData /en-US/docs/Web/API/PasswordCredential /en-US/docs/Web/API/PasswordCredential/idName /en-US/docs/Web/API/PasswordCredential /en-US/docs/Web/API/PasswordCredential/passwordName /en-US/docs/Web/API/PasswordCredential diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 2b1af7ed24b261c..28b55fa48a9cabf 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -71004,48 +71004,6 @@ "teoli" ] }, - "Web/API/ParentNode/append": { - "modified": "2020-11-27T11:36:02.538Z", - "contributors": [ - "TrevorKarjanis", - "mfuji09", - "beingmrkenny", - "Zearin_Galaurum", - "timtim17", - "matthewp", - "mfluehr", - "ExE-Boss", - "raidiun", - "stevenwdv", - "Delapouite", - "gretencord", - "jszhou", - "valtlai", - "jpmedley", - "fscholz" - ] - }, - "Web/API/ParentNode/prepend": { - "modified": "2020-11-27T11:36:17.341Z", - "contributors": [ - "TrevorKarjanis", - "mfuji09", - "beingmrkenny", - "sideshowbarker", - "rysmax", - "matthewp", - "mfluehr", - "krosylight", - "ExE-Boss", - "merih", - "stevenwdv", - "CollinGrimm", - "Sheppy", - "jszhou", - "jpmedley", - "fscholz" - ] - }, "Web/API/ParentNode/querySelector": { "modified": "2020-10-15T22:11:25.046Z", "contributors": [ @@ -165623,5 +165581,47 @@ "Midnightaz", "hamishwillee" ] + }, + "Web/API/Element/append": { + "modified": "2020-11-27T11:36:02.538Z", + "contributors": [ + "TrevorKarjanis", + "mfuji09", + "beingmrkenny", + "Zearin_Galaurum", + "timtim17", + "matthewp", + "mfluehr", + "ExE-Boss", + "raidiun", + "stevenwdv", + "Delapouite", + "gretencord", + "jszhou", + "valtlai", + "jpmedley", + "fscholz" + ] + }, + "Web/API/Element/prepend": { + "modified": "2020-11-27T11:36:17.341Z", + "contributors": [ + "TrevorKarjanis", + "mfuji09", + "beingmrkenny", + "sideshowbarker", + "rysmax", + "matthewp", + "mfluehr", + "krosylight", + "ExE-Boss", + "merih", + "stevenwdv", + "CollinGrimm", + "Sheppy", + "jszhou", + "jpmedley", + "fscholz" + ] } } \ No newline at end of file diff --git a/files/en-us/web/api/childnode/after/index.html b/files/en-us/web/api/childnode/after/index.html index a0ed1aeea9ce48e..b52d220350a4035 100644 --- a/files/en-us/web/api/childnode/after/index.html +++ b/files/en-us/web/api/childnode/after/index.html @@ -177,9 +177,8 @@

Browser compatibility

See also

diff --git a/files/en-us/web/api/parentnode/append/index.html b/files/en-us/web/api/parentnode/append/index.html deleted file mode 100644 index e213990db93d1e9..000000000000000 --- a/files/en-us/web/api/parentnode/append/index.html +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: ParentNode.append() -slug: Web/API/ParentNode/append -tags: -- API -- DOM -- Method -- Node -- ParentNode -- Reference ---- -

{{APIRef("DOM")}}

- -

The ParentNode.append() method - inserts a set of {{domxref("Node")}} objects or {{domxref("DOMString")}} objects after - the last child of the ParentNode. {{domxref("DOMString")}} objects - are inserted as equivalent {{domxref("Text")}} nodes.

- -

Differences from {{domxref("Node.appendChild()")}}:

- - - -

Syntax

- -
// [Throws, Unscopable]
-ParentNode.append(...nodesOrDOMStrings) // returns undefined
-
- -

Parameters

- -
-
nodesOrDOMStrings
-
A set of {{domxref("Node")}} or {{domxref("DOMString")}} objects to insert.
-
- -

Exceptions

- - - -

Examples

- -

Appending an element

- -
let parent = document.createElement("div")
-let p = document.createElement("p")
-parent.append(p)
-
-console.log(parent.childNodes) // NodeList [ <p> ]
-
- -

Appending text

- -
let parent = document.createElement("div")
-parent.append("Some text")
-
-console.log(parent.textContent) // "Some text"
- -

Appending an element and text

- -
let parent = document.createElement("div")
-let p = document.createElement("p")
-parent.append("Some text", p)
-
-console.log(parent.childNodes) // NodeList [ #text "Some text", <p> ]
- -

ParentNode.append() is unscopable

- -

The append() method is not scoped into the with statement. - See {{jsxref("Symbol.unscopables")}} for more information.

- -
let parent = document.createElement("div")
-
-with(parent) {
-  append("foo")
-}
-// ReferenceError: append is not defined
- -

Polyfill

- -

You can polyfill the append() method in Internet Explorer 9 and higher - with the following code:

- -
// Source: 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]);
- -

Specifications

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

Browser compatibility

- -

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

- -

See also

- - diff --git a/files/en-us/web/api/parentnode/prepend/index.html b/files/en-us/web/api/parentnode/prepend/index.html deleted file mode 100644 index 235fb7e7580bb58..000000000000000 --- a/files/en-us/web/api/parentnode/prepend/index.html +++ /dev/null @@ -1,147 +0,0 @@ ---- -title: ParentNode.prepend() -slug: Web/API/ParentNode/prepend -tags: -- API -- DOM -- Method -- Node -- ParentNode -- Reference -- prepend ---- -

{{APIRef("DOM")}}

- -

The ParentNode.prepend() method inserts a set of - {{domxref("Node")}} objects or {{domxref("DOMString")}} objects before the first child - of the {{domxref("ParentNode")}}. {{domxref("DOMString")}} objects are inserted as - equivalent {{domxref("Text")}} nodes.

- -

Syntax

- -
ParentNode.prepend(...nodesOrDOMStrings);
-
- -

Parameters

- -
-
nodesOrDOMStrings
-
A set of {{domxref("Node")}} or {{domxref("DOMString")}} objects to insert.
-
- -

Return value

- -

undefined.

- -

Exceptions

- - - -

Examples

- -

Prepending an element

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

Prepending text

- -
var parent = document.createElement("div");
-parent.append("Some text");
-parent.prepend("Headline: ");
-
-console.log(parent.textContent); // "Headline: Some text"
- -

Appending an element and 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() is unscopable

- -

The prepend() method is not scoped into the with statement. - See {{jsxref("Symbol.unscopables")}} for more information.

- -
var parent = document.createElement("div");
-
-with(parent) {
-  prepend("foo");
-}
-// ReferenceError: prepend is not defined
- -

Polyfill

- -

You can polyfill the prepend() method if it's not available:

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

Specifications

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

Browser compatibility

- -

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

- -

See also

- - diff --git a/files/en-us/web/api/parentnode/replacechildren/index.html b/files/en-us/web/api/parentnode/replacechildren/index.html index 70a8317ed892f58..db2f93e2ccfe386 100644 --- a/files/en-us/web/api/parentnode/replacechildren/index.html +++ b/files/en-us/web/api/parentnode/replacechildren/index.html @@ -177,8 +177,7 @@

Browser compatibility

See also

diff --git a/files/en-us/web/api/xmlserializer/index.html b/files/en-us/web/api/xmlserializer/index.html index 8898f24ba79297e..07d937c4614bb96 100644 --- a/files/en-us/web/api/xmlserializer/index.html +++ b/files/en-us/web/api/xmlserializer/index.html @@ -47,7 +47,7 @@

Inserting nodes into a DOM base

Note: In the real world, you should usually instead call {{domxref("Document.importNode", "importNode()")}} method to import the new node into the DOM, then call one of the following methods to add the node to the DOM tree: