> For the complete documentation index, see [llms.txt](https://certil-remy.gitbook.io/learn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://certil-remy.gitbook.io/learn/javascript/dom/untitled-3.md).

# Creating and Inserting DOM Nodes

## Problem Statement

We can find and select nodes in the DOM. But now we want to do more. What if we need to create or insert a new element, or remove one? We need a box of JavaScript tools that will help us out.

## Objectives

1. Create DOM elements programmatically
2. Append elements in the DOM
3. Remove elements from the DOM

## Create DOM Elements Programmatically

### `document.createElement()`

Creating an element in JavaScript couldn't be easier. Simply call `document.createElement(tagName)`, where `tagName` is the string representation of any valid HTML tag (e.g., `'p'`, `'div'`, `'span'`, etc.).

Open this lesson's `index.html` file in your browser and open up the browser's console. In the console, enter

```
let element = document.createElement('div');
```

Type `element.` (or whatever you named your new element). It's an existing DOM element, but it doesn't yet appear in the DOM.

We can set properties on it:

```
element.innerHTML = 'Hello, DOM!';
element.style.backgroundColor = '#f9f9f9';
```

Feel free to set as many properties as you'd like — this is a good chance to look around and explore different properties of DOM elements!

But notice that no matter what properties we add, the element doesn't show up on the page. What gives?

## Append Elements into the DOM

To get an element to appear in the DOM, we have to append it to an existing DOM node. To go back to our tree metaphor, we have to glue our new leaf onto a branch that's already there. We can start as high up on the tree as `document.body`, or we can find a more specific element using any of the techniques we've learned for traversing the DOM.

### `appendChild()`

Let's append `element` to `body` to start:

```
document.body.appendChild(element);
```

If you've been following along, you should see `"Hello, DOM!"` on the page now (and it should have a light gray background).

We can continue to update `element`, since we have a reference to it:

```
element.style.textAlign = 'center';
```

And now our element's text is centered.

We can append elements to that element:

```
let ul = document.createElement('ul');

for (let i = 0; i < 3; i++) {
  let li = document.createElement('li');
  li.innerHTML = (i + 1).toString();
  ul.appendChild(li);
}

element.appendChild(ul);
```

Hm, that looks a bit ugly. Let's fix it

```
ul.style.textAlign = 'left';
```

That's better.

## Remove Elements from the DOM

Now let's remove one of those `li`s.

### `removeChild()`

```
ul.removeChild(ul.querySelector('li:nth-child(2)'));
```

Boom. Second element is gone.

What if we want to remove the whole unordered list (`ul`)?

### `element.remove()`

We can just call `remove()` on the element itself:

And it's gone!

## Working in index.js

Now that you've experimented with manipulating DOM nodes in the Javascript console, try saving some of your Javascript DOM manipulation code to `js/index.js`. You'll notice that when you reload the page, your code runs just as it did in the console.

## Resources

* [document.createElement()](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)
* [appendChild()](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild)
* [removeChild()](https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild)
* [element.remove()](https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/remove)

## Conclusion

We learned how to create, append and remove elements in the DOM with JavaScript.

View [Creating And Inserting Nodes](https://learn.co/lessons/creating-and-inserting-dom-nodes) on Learn.co and start learning to code for free.

clone: <https://github.com/learn-co-curriculum/js-dom-and-events-removing-altering-and-inserting-html-readme>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://certil-remy.gitbook.io/learn/javascript/dom/untitled-3.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.