# Manipulating the DOM Structure

createElement makes a new element, appendChild puts it inside a parent so it shows on the page, and remove takes an element off the page.

Apprentice · JavaScript · Updated October 29, 2026

## After this lesson you can

- Create an element with createElement, add it to the page with appendChild, and take one off with remove

## Key takeaways

- document.createElement makes a new element, but it isn't on the page yet.
- parent.appendChild(child) adds the new element as the parent's last child, and that puts it on the page.
- element.remove() takes an element, and everything inside it, off the page.

A to-do list that grows when you add a task, a cart that drops an item, a message that appears after you save: each one is an element created, added or removed while the page is open. This lesson shows how to make new elements, put them on the page, and take them off again.

## Creating New Elements

We use the document object to create a new element.

```javascript
// this creates a new div
const newDiv = document.createElement("div");
newDiv.textContent = "Free shipping on orders over $50";
```

Note that creating a new element does not add it to the DOM. We still need to insert it.

## Adding Elements to the DOM

```javascript
// creates the new div
const newDiv = document.createElement("div");
newDiv.textContent = "Free shipping on orders over $50";

// locate the parent element
const parent = document.getElementById("parent");

// insert the new div as a child of the parent element
parent.appendChild(newDiv);
```

`appendChild` adds the new element as the parent's last child. Now it's in the DOM, so it shows on the page.

## Removing Elements from the DOM

```javascript
// locate the element
const element = document.getElementById("target");
element.remove();
```

`remove()` takes the element off the page, along with everything inside it.

## Summary

The DOM is an in-memory representation of the HTML page. Each HTML element is an object in the DOM.

Using JavaScript, you can locate and manipulate any element in the DOM. This allows you to create a rich user experience by responding to user actions.

To learn more about working with the DOM please see: [https://www.w3schools.com/JS/js_htmldom.asp](https://www.w3schools.com/JS/js_htmldom.asp)

## Check yourself

2 questions to try on the lesson page.

## So what

Changing a page's structure is three steps: make the element, fill it in, and put it where it belongs in the tree. Removing one is a single call.

## Key terms

- [createElement()](https://www.ask-codey.com/glossary/createelement)
- [appendChild()](https://www.ask-codey.com/glossary/appendchild)

Source: https://www.ask-codey.com/lessons/working-with-elements-manipulating-the-dom-structure