ADDING NEW HTML ELEMENTS

Now it’s your turn to have a go at using the createElement and appendChild methods.

In your code, use the DOM and JavaScript to create a new HTML element when an existing element is clicked.

Using APIs like the DOM makes building apps easier.

1) Open up your text-editing program. Create a new HTML file called newelements.html. Code a < div > (with an id attribute) that contains text, like this:

<!DOCTYPE html>
<html>
<head>
 <title>New Elements</title>
</head>
<body>
 <div id="list">Click here to add item</div>
</body>
</html>

2) In your < head >, create a new function. Your code will look like this:

<head>
 <title>New Elements</title>
 <script>
 function addItem() {
 }
 </script>
</head>

3) Now make your function create a new < div > using the createElement method. Store your new < div > in a variable and give the variable a name.

Then set the value of your new < div > to some text using the innerHTML property.

Your code will look like this:

<script>
 function addItem() {
 var newItem = document.createElement("div");
 newItem.innerHTML = "New item";
 }
</script>

4) Add a final line to your function. Use getElementById to find the < div > in your < body >. Use the appendChild method to add the new < div > to the

< div > in your < body >. Your code will look like this:

<script>
 function addItem() {
 var newItem = document.createElement("div");
 newItem.innerHTML = "New item";
 document.getElementById("list").appendChild(newItem);
 }
</script>

5) Now the only thing missing is the function call in the < body > of our code. Add the onclick attribute to the < div > in your < body >, so that when the

< div > text is clicked your addItem function is called.

Your code will look like this:

<body>
 <div id="list" onclick="addItem();">Click here to add item</div>
</body>

6) Save your HTML file and open it in your browser.

When you click on the “Click here“ piece of text a new < div > will be added to your app every time you click.

But how do we add the button to our app? Keep reading…