Modifying Attributes of HTML Elements

Introducing the innerHTML property!

The DOM is used to create references to HTML elements. In this section we will look at how the DOM can be used to get or change the contents of an element.

The 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 querySelector), in order to use a property in JavaScript, we use the symbol . after an element, or variable containing an Element type.

elementName.innerHTML = htmlString;

• elementName.innerHTML: This will return the contents of elementName.
• =: Symbol used to assign a value.
• htmlString: The new value we want to assign the contents of elementName.
• ;: A semicolon ends a JavaScript statement. JavaScript can automatically insert most missing semicolons, but always including one is the convention used throughout these guides and avoids ASI pitfalls.

Inserting Elements into the DOM

In the last section we saw how the innerHTML property can be used to replace the contents of an element. To add HTML elements without throwing away what is already there, the preferred approach is insertAdjacentHTML (covered below). Let’s think about why we might add additional HTML elements from 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.

1. Adding a pop up when a user clicks on a button.
2. Implementing an “infinite scroll” or adding more results as a user reaches the bottom of our page.
3. Changing the contents on a page based on user input.
4. Add status updates for events (uploading, downloading, etc.)

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. The recommended method is insertAdjacentHTML:

divElement.insertAdjacentHTML('beforeend', `
  <!-- Insert HTML elements here -->
  <p>New HTML elements!</p>
`);

• divElement: When injecting HTML elements, this is typically a div element in the HTML document. This way it is easy to contain or group the new elements together without disrupting the existing layout.
• insertAdjacentHTML(position, htmlString): Parses htmlString as HTML and inserts the resulting nodes into the DOM at position relative to divElement. Use 'beforeend' to add the new HTML as the last child of divElement, so it appears below any existing children. The other accepted positions are 'beforebegin', 'afterbegin', and 'afterend'.
• ``: Inside the template literal we put the HTML elements we wish to insert.

⚠️ Avoid divElement.innerHTML += '...'. Older tutorials sometimes teach divElement.innerHTML += '<p>New HTML elements!</p>' for appending. The += form serializes the element’s existing contents back to a string, concatenates the new HTML, then re-parses and replaces everything — which destroys references and event listeners attached to existing children. Per MDN, insertAdjacentHTML “does not reparse the element it is being used on, and thus it does not corrupt the existing elements inside that element. This avoids the extra step of serialization, making it much faster than direct innerHTML manipulation.”