Adding Elements To The Page

Open the project folder

The sectionWrapper

Typing sectionWrapper into the console should now reveal our newly created section, along with the contents:

<section>
  <h3>Helping the planet, one bite at a time...</h3>
  <div class="content">
    <div class="image_section">
      <img src="burger.jpg" alt="burger image">
    </div>
    <div class="info_section">
      <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolore aut unde sunt.
      </p>
      <button>BUY ONLINE</button>
    </div>
  </div>
</section>

We have used JavaScript to create these new elements, and now we need a way to get this onto the page. First, comment out the original HTML section so we don’t get confused with which one we are viewing in the browser:

<!--
<section>
  <h3>Helping the planet, one bite at a time...</h3>
  <div class="content">
  …
<section>
-->

This will remove the section from the browser. We can place our new HTML section anywhere we want to, but currently it is a direct child of the body section.

Step 1 is to select the body:

// ADD TO PAGE
document.body

The append and prepend methods

Two common methods we have available is append and prepend, depending on if we want to add the new content to the beginning or end.

Prepend will add the new content to the beginning of the body section:

document.body.prepend(sectionWrapper);

This will appear above the header since it is added to the beginning of the body. To add to the end of the existing body content, we use append:

document.body.append(sectionWrapper);

Adding multiple elements

This append method can be used to add multiple elements, along with what is called a DOMString. This is like a JavaScript string of text, or a text node:

document.body.append('hey you ', buttonElement, imageElement, 'heeey');

There is also a similar method called appendChild:

document.body.appendChild('hey you ', buttonElement, imageElement, 'heeey');

However, this will give us an error in the console:

We will get an error because there are some differences between how append and appendChild handles inserting elements or nodes.

Differences between append and appendChild

The appendChild method can only be used to add a single node or text element, if we have more than one to add, append is the way to go. Also, appendChild cannot be used for DOMStrings, so we cannot use it to insert text nodes.

Only appendChild gives a return value too, which is the newly added node.

So, the text here is causing an issue, and the number of items we are adding. If we make these changes it will work:

document.body.appendChild(buttonElement);

The insertBefore method

The next method to cover is insertBefore. This gives us a bit more flexibility in where we place in our new nodes.

Let’s take our header for example:

<header>
  <h1 id="site-title"><span class="green">No Meat</span> Burgers</h1>
  <nav>
    <ul class="nav-inline">
      <li class="nav-item">our burgers</li>
      <li class="nav-item">history</li>
    </ul>
  </nav>
</header>

In here, imagine we wanted to place a new element between the h1 and the nav. The methods we have covered so far only place elements at the beginning or the end.

As the insertBefore methods sounds, it can be used to insert our new element before the nav or any other element.

For this we will store the header and nav into variables:

const header = document.querySelector('header');
const nav = document.querySelector('nav');

We do this because we need a reference to the parent element (header), and since we want to insert an element before the nav, we also need to reference this too. Then we call the insertBefore method on the parent header:

const header = document.querySelector('header');
const nav = document.querySelector('nav');
header.insertBefore(buttonElement, nav);

We see above the insertBefore method takes in two values, the element to insert, followed by the element to place it in before. This works by selecting the parent, which is the header, and adding an element inside it at the selected location.

The replaceChild method

Another method which also works on the parent is replaceChild. As it sounds, this will replace one of the child elements with a new one we specify.

const header = document.querySelector('header');
const nav = document.querySelector('nav');
// 1. comment out insertBefore
// header.insertBefore(buttonElement, nav);
// 2. add replaceChild (new element / old element)
header.replaceChild(buttonElement, nav);

These are just some different ways of adding new nodes or elements to a web page with JavaScript. Before moving on, remove any of these examples and place back in the original section we created:

// ADD TO PAGE
document.body.append(sectionWrapper);