Adding to your app using the DOM

We now know how to use the DOM’s methods and properties to find and change HTML elements in our app, which will be really useful.

We now need to learn how to use the DOM to add new HTML elements to our app. After all, users need to be able to add items to the list.

The DOM has two methods that we can use with JavaScript to do this.

The createElement method

The createElement method is used to make a new HTML element, such as

a < div >, button or a paragraph.

You have to include the name of the type of HTML element you want to create in double quotes (” “) and brackets after the keyword, like this:

 document.createElement("div");

You can then use JavaScript to assign your new element to a variable, using the assignment operator (=) we learnt about earlier.

Then you can use the innerHTML property to set the content of your new element before your browser draws it on-screen.

The appendChild method

The appendChild method lets you add a new HTML element to an existing HTML element.

When the new element is drawn on-screen, it will be drawn underneath the existing element.

You have to include the HTML element you want to add in brackets after the keyword, like this:

<script>
 var newDiv = document.createElement("div");
 newDiv.innerHTML = "Bob";
 document.body.appendChild(newDiv);
</script>

The appendChild and createElement methods allow you to add each item to the list in the app.

All the DOM methods and properties are written using camelCase.

Let’s have a look at an example that uses the createElement and appendChild methods to create a new HTML element on our page.

The HTML element will be a < div > with a piece of text inside it. A < div > is a useful way of creating a section or container for other HTML elements.

<!DOCTYPE html>
<html>
<head>
 <title>To-Do List App</title>
</head>
<body>
 <div id="list">To-Do List</div>
 <script>
 var newItem = document.createElement("div");
 newItem.innerHTML = "Item added to list";
 document.getElementById("list").appendChild(newItem);
 </script>
</body>
</html>

The first thing we’ve done is code a < div > and set its id attribute to list.

This < div > will be the HTML element we add our new HTML element to, using appendChild.

Then we’ve opened the < script > tag and created a block of JavaScript code. In the first line of JavaScript we have used createElement to make a < div >.

We have then stored this new < div > in a variable called newItem.

You can use any name you want here. In our next line of JavaScript, we’ve set the value of our variable to a piece of text using the innerHTML property.

Our new < div >, stored in our variable now contains text.

In our final line of JavaScript, we’ve used getElementById to find the first

< div > we made using the id attribute. We’ve then used appendChild to add the < div > stored in our variable to the first < div > on our page.

When we run our code in our web browser, we will see our new < div > has been added to our first < div >.