# 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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://edrus.gitbook.io/mt-it/2nd-month/week-6/dom-document-object-model/manipulating-elements/appendchild.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
