The DOM is used to create references to HTML element. In this section we will look at how the DOM can be used to get or change the contents of an element.
innerHTML property can be used to get the contents of an
Element. Remember that for HTML elements, its contents are what is contained between the opening and closing tags.
Unlike DOM methods (like
. after an element, or variable containing an
elementName.innerHTML = htmlString;
elementName.innerHTML: This will return the contents of
=: Symbol used to assign a value.
htmlString: The new value we want to assign the contents of
In the last section we saw how
innerHTML property can be used to change the contents of an element by changing the text displayed for student information. However, this property can do so much more! In fact, developers can use the
innerHTML property to inject or insert HTML elements into the webpage. Let's think about why we might additional HTML elements on the script as opposed to on the HTML document itself!
The HTML document holds the structure, or skeleton, of the website itself. We can manipulate the structure slightly from the script but overall, the structure of the website remains the same from when we initialize it with our
index.html page. Let's think about examples of when we might modify what is visible to the page from the script.
Adding HTML elements on the script side can give users the appearance of a "new" page without reloading the entire page. This can be less demand on the server side with dynamic changes. Let's take a look at the syntax for injecting HTML elements with the use of the
divElement.innerHTML += `
<!-- Insert HTML elements here -->
<p>New HTML elements!</p>
divElement: When injecting HTML elements, this is typically added to
div elements in the HTML document. This way it is easy to contain or group the new elements together without disrupting the existing layout.
+=: This operator allows us to append or add values to an existing variable. Unlike the
= operator which replaces and reassigns a value to a variable, the
+= add and updates the value of the existing variable.
``: Inside of the
`` symbol we can add the HTML elements we wish to add. New injected elements will be added below any existing elements.