> For the complete documentation index, see [llms.txt](https://edrus.gitbook.io/mt-it/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://edrus.gitbook.io/mt-it/2nd-month/week-6/dom-document-object-model/manipulating-elements/appendchild.md).
# appendChild()
### Introduction to the JavaScript `appendChild()` method
The `appendChild()` is a method of the `Node` interface. The `appendChild()` method allows you to add a node to the end of the list of child nodes of a specified parent node.
The following illustrates the syntax of the `appendChild()` method:
```css
parentNode.appendChild(childNode);Code language: CSS (css)
```
In this method, the `childNode` is the node to append to the given parent node. The `appendChild()` returns the appended child.
If the `childNode` is a reference to an existing node in the document, the `appendChild()` method moves the `childNode` from its current position to the new position.
### JavaScript `appendChild()` examples
Let’s take some examples of using the `appendChild()` method.
#### 1) Simple `appendChild()` example
Suppose that you have the following HTML markup:
```xml
Code language: HTML, XML (xml)
```
The following example uses the `appendChild()` method to add three list items to the `
` element:
```javascript
function createMenuItem(name) {
let li = document.createElement('li');
li.textContent = name;
return li;
}
// get the ul#menu
const menu = document.querySelector('#menu');
// add menu item
menu.appendChild(createMenuItem('Home'));
menu.appendChild(createMenuItem('Services'));
menu.appendChild(createMenuItem('About Us'));
Code language: JavaScript (javascript)
```
How it works:
* First, the `createMenuItem()` function create a new list item element with a specified name by using the [`createElement()`](https://www.javascripttutorial.net/javascript-dom/javascript-createelement/) method.
* Second, select the `
` element with id `menu` using the [`querySelector()`](https://www.javascripttutorial.net/javascript-dom/javascript-queryselector/) method.
* Third, call the `createMenuItem()` function to create a new menu item and use the `appendChild()` method to append the menu item to the `
` element
Output:
```xml
Home
Services
About Us
Code language: HTML, XML (xml)
```
Put it all together:
```xml
JavaScript appendChild() Demo
Code language: HTML, XML (xml)
```
#### 2) Moving a node within the document example
Assuming that you have two lists of items:
```xml
Everest
Fuji
Kilimanjaro
Karakoram Range
Denali
Mont Blanc
Code language: HTML, XML (xml)
```
The following example uses the `appendChild()` to move the first child element from the first list to the second list:
```javascript
// get the first list
const firstList = document.querySelector('#first-list');
// take the first child element
const everest = firstList.firstElementChild;
// get the second list
const secondList = document.querySelector('#second-list');
// append the everest to the second list
secondList.appendChild(everest)
Code language: JavaScript (javascript)
```
How it works:
* First, select the first element by its id (`first-list`) using the `querySelector()` method.
* Second, select the first child element from the first list.
* Third, select the second element by its id (`second-list`) using the `querySelector()` method.
* Finally, append the first child element from the first list to the second list using the `appendChild()` method.
Here are the list before and after moving:
### Summary
* Use `appendChild()` method to add a node to the end of the list of child nodes of a specified parent node.
* The `appendChild()` can be used to move an existing child node to the new position within the document.
