06-dom-manipulation.md

Creating HTML with Javascript (DOM Manipulation)

Back in forms and events we learnt how to find items in the HTML code using this code:

var htmlElement = document.querySelector('.js-class-name');

JS knows what the HTML looks like because it creates it's own map of the page structure. It calls it the Document Object Model or DOM for short. JS isn't just able to query elements in the DOM and run events on them, it can be used to create new elements, edit existing or delete them entirely.

Creating new elements

In your HTML you need a container to inject a new element into with Javascript. So over in index.html create a new div like this (again, it's really important that these go before the <script src="script.js"></script> line):

<div class="js-container">
  Hello
</div>

Now… the first step in JS is to select the new js-container.

var container = document.querySelector('.js-container');

Then we need to write some new HTML to add to it:

var newContent = `
  <div>
    <h2>Hello</h2>
    <p>This will be inserted… like magic</p>
  </div>
`;

Finally add the newContent to the container:

container.innerHTML = newContent;

Refresh the page and see what happens.

innerHTML can also be used to empty a container:

container.innerHTML = null;

You can also use it to append to the end, rather than entirely overwriting the content:

container.innerHTML += `
  <p>This is another paragraph…</p>
`;

Challenge

With your form update your event handler so that rather than alerting the name that is entered, it creates a new <h1> element with the name on it.

As a stretch task, when you add the name add a button next to it that will allow you to delete it… You can also combine this with your work from local storage - if the name exists in Local Storage, rather than displaying the form, make it display the message hello {name},

Let's dive deeper into arrays, with some splicing.