Javascript this append child

JavaScript appendchild(): What it is and when to use it

The JavaScript appendChild() method is used to insert a new node or reposition an existing node as the last child of a particular parent node.

Table of Contents

Syntax of JavaScript appendChild:

parentNode.appendChild(childNode);

The childNode is the node that we want to append to the parent node parentNode . appendChild() will return the appended child.

What is the JavaScript appendChild() method?

The JavaScript appendChild() is a method of the Node interface, used to append nodes (typically elements) at the end of a specified parent node. It can be executed on existing child nodes or by creating new elements:

To create a new element to be inserted at the end of a parent node, first use createElement to create it and then appendChild() for the newly-created element.

The appendChild() method also works on existing child nodes, using which you can move them to new positions within the document. In such a case, appendChild() moves the particular child node from its current position to a new position at the end of the list of child nodes under the specified parent node.

For appending existing child nodes to any other node, note that there is no need to remove the node from its parent node first. This is because a node can’t be present in two positions within the same document simultaneously.

So, when you use appendChild() to append an existing child node to another node, the child node is first removed, and then appended at the new position.

JavaScript appendChild(): Examples

// Create a new paragraph element, and append it to the end of the document body let p = document.createElement("p"); document.body.appendChild(p);

2) How to use the appendChild() method

3) How to move an existing element within the same document using appendchild()

Key points to note: appendChild() method

• ‘Appended’ essentially means ‘attach at the end’.

• You can use cloneNode() to make a clone of the node before appending it under a new parent. However, remember that the copies of nodes made using cloneNode won’t be updated automatically.

• You cannot use the appendChild() method to append elements belonging to another document. For this, you’ll first have to use importNode or adoptNode to import foreign elements, and then use appendChild() on to insert them into the desired position.

• You can use the removeChild method to remove a child from an element.

JavaScript appendChild() vs. append()

append() is a newer API that allows you to insert a set of DOMString objects (in addition to Node objects) as equivalent text nodes at the end of the list of child nodes of a parent node.

Difference between appendChild() and append()

1. Node vs. DOMString objects

Unlike parentNode.appendChild() , which only allows you to append Node objects and return the appended Node object, parentNode.append() also allows you to append DOMString objects, and it has no return value.

2. Single vs. Multiple arguments

Further, parentNode.appendchild() allows you to append only one node, while parentNode.append() supports multiple arguments — so you can append several nodes and strings.

Objects that support appendChild()

The following JavaScript objects support the `appendChild()` method:

The following HTML elements support the `appendChild()` method:

, , , , , , , , , , , , , , , , , , , , , , , ,
, , ,

, , , , , , , , , , , ,
, , ,

Browsers that support appendChild()

The following browsers support the appendChild() method:

Read more about JavasCript appendchild on Mozilla’s official Web Docs.

Источник

Node: appendChild() method

The appendChild() method of the Node interface adds a node to the end of the list of children of a specified parent node.

Note: If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position.

If the given child is a DocumentFragment , the entire contents of the DocumentFragment are moved into the child list of the specified parent node.

appendChild() returns the newly appended node, or if the child is a DocumentFragment , the emptied fragment.

Note: Unlike this method, the Element.append() method supports multiple arguments and appending strings. You can prefer using it if your node is an element.

Syntax

Parameters

The node to append to the given parent node (commonly an element).

Return value

A Node that is the appended child ( aChild ), except when aChild is a DocumentFragment , in which case the empty DocumentFragment is returned.

Exceptions

Thrown when the constraints of the DOM tree are violated, that is if one of the following cases occurs:

• If the parent of aChild is not a Document , DocumentFragment , or an Element .
• If the insertion of aChild would lead to a cycle, that is if aChild is an ancestor of the node.
• If aChild is not a DocumentFragment , a DocumentType , an Element , or a CharacterData .
• If the current node is a Text , and its parent is a Document .
• If the current node is a DocumentType and its parent is not a Document , as a doctype should always be a direct descendant of a document.
• If the parent of the node is a Document and aChild is a DocumentFragment with more than one Element child, or that has a Text child.
• If the insertion of aChild would lead to Document with more than one Element as child.

Description

If the given child is a reference to an existing node in the document, appendChild() moves it from its current position to the new position — there is no requirement to remove the node from its parent node before appending it to some other node. This means that a node can’t be in two points of the document simultaneously. The Node.cloneNode() method can be used to make a copy of the node before appending it under the new parent. Copies made with cloneNode are not automatically kept in sync.

appendChild() returns the newly appended node, instead of the parent node. This means you can append the new node as soon as it’s created without losing reference to it:

const paragraph = document.body.appendChild(document.createElement("p")); // You can append more elements to the paragraph later 

On the other hand, you cannot use appendChild() in a fluent API fashion (like JQuery).

// This doesn't append three paragraphs: // the three elements will be nested instead of siblings document.body .appendChild(document.createElement("p")) .appendChild(document.createElement("p")) .appendChild(document.createElement("p")); 

Example

Append a paragraph to the body

// Create a new paragraph element, and append it to the end of the document body const p = document.createElement("p"); document.body.appendChild(p); 

Creating a nested DOM structure

In this example, we attempt to create a nested DOM structure using as few temporary variables as possible.

const fragment = document.createDocumentFragment(); const li = fragment .appendChild(document.createElement("section")) .appendChild(document.createElement("ul")) .appendChild(document.createElement("li")); li.textContent = "hello world"; document.body.appendChild(fragment); 

It generates the following DOM tree:

section> ul> li>hello worldli> ul> section> 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 13, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

JavaScript appendchild(): What it is and when to use it

The childNode is the node that we want to append to the parent node parentNode . appendChild() will return the appended child.

What is the JavaScript appendChild() method?

The JavaScript appendChild() is a method of the Node interface, used to append nodes (typically elements) at the end of a specified parent node. It can be executed on existing child nodes or by creating new elements:

Creating elements

To create a new element to be inserted at the end of a parent node, first use createElement to create it and then appendChild() for the newly-created element.

Existing elements

The appendChild() method also works on existing child nodes, using which you can move them to new positions within the document. In such a case, appendChild() moves the particular child node from its current position to a new position at the end of the list of child nodes under the specified parent node.

For appending existing child nodes to any other node, note that there is no need to remove the node from its parent node first. This is because a node can’t be present in two positions within the same document simultaneously.

So, when you use appendChild() to append an existing child node to another node, the child node is first removed, and then appended at the new position.

JavaScript appendChild(): Examples

1) Simple example

// Create a new paragraph element, and append it to the end of the document body let p = document.createElement("p"); document.body.appendChild(p); 

2) How to use the appendChild() method

DOCTYPE html> html> head> meta charset="utf-8"> title>How to use JavaScript appendChild()/title> /head> body> ul id="userprofile"> /ul> script> function createMenuItem(name)  let li = document.createElement('li'); li.textContent = name; return li; > // get the ul#userprofile const userprofile = document.querySelector('#userprofile'); // add the user profile items userprofile.appendChild(createMenuItem('Profile')); userprofile.appendChild(createMenuItem('Settings')); userprofile.appendChild(createMenuItem('Log out')); /script> /body> /html> 

3) How to move an existing element within the same document using appendchild()

ul id="list1"> li>Chocolate/li> li>Ice-cream/li> li>Candy/li> /ul> ul id="list2"> li>Chips/li> li>Smoothie/li> li>Soda/li> /ul> // get list1 const firstList = document.querySelector('#list1'); // get the first child element const chocolate = firstList.firstElementChild; // get list2 const secondList = document.querySelector('#list2'); // append chocolate to list2 secondList.appendChild(chocolate) 

Key points to note: appendChild() method

• ‘Appended’ essentially means ‘attach at the end’.
• You can use cloneNode() to make a clone of the node before appending it under a new parent. However, remember that the copies of nodes made using cloneNode won’t be updated automatically.
• You cannot use the appendChild() method to append elements belonging to another document. For this, you’ll first have to use importNode or adoptNode to import foreign elements, and then use appendChild() to insert them into the desired position.
• You can use the removeChild method to remove a child from an element.

JavaScript appendChild() vs. append()

append() is a newer API that allows you to insert a set of DOMString objects (in addition to Node objects) as equivalent text nodes at the end of the list of child nodes of a parent node.

Syntax of append()

Difference between appendChild() and append()

1. Node vs. DOMString objects

Unlike parentNode.appendChild() , which only allows you to append Node objects and return the appended Node object, parentNode.append() also allows you to append DOMString objects, and it has no return value.

2. Single vs. Multiple arguments

Further, parentNode.appendchild() allows you to append only one node, while parentNode.append() supports multiple arguments — so you can append several nodes and strings.

Objects that support appendChild()

The following JavaScript objects support the appendChild() method:

The following HTML elements support the appendChild() method:

Browsers that support appendChild()

The following browsers support the appendChild() method:

Read more about JavasCript appendchild on Mozilla’s official Web Docs.

Источник