The Web Developer Bootcamp 2024

Colt Steele

Back to DOM Index Page

Parent | Child | Sibling
Adding HTML Items

Adding new HTML elements is pretty straight forward, but there are multiple steps. There are a couple of different ways to accomplish this, so first we'll start with appendChild().



Using appendChild

Let's add a NEW element to the page using appendChild(). We're going' to add a NEW H6 element to this webpage, but we want to add it to the end of THIS paragraph. Since this paragraph is actually contained within the 2nd [article] element on this page, we will need to use querySelectorAll('article')[1]; to select it. So lets select the 2nd [article] element and assign it to a variable:

  1. 1. select the article element and assign it to a variable
    • const art = document.querySelectorAll('article')[1];
      • selects the 2nd article element on the page and assigns it to the variable art
  2. 2. create a new element and assign it to a variable
    • const newEle = document.createElement('h6');
      • creates a new empty H6 element.
  3. 3. add info to the new element, such as text, src, etc.
    • newEle.innerText = 'I am the New H6 Element';
      • the new empty H6 element now has some text.
  4. 4. change the font color to make the new element stand out on the page (optional)
    • newEle.style.color = '#961d1d';
  5. 5. append the new element to the end of the specified document location, in this case, to the end of the 2nd article element of the page.
    • art.appendChild(newEle);

And there we go. We have now added the following H6 element to the end of the 2nd article element on this page. (remember that the following H6 element is NOT part of the original HTML). Also, we changed the font color of our new h6 element just to make it stand out on the page.



Using append

We can also add to a webpage by using the append() method. Using append() is very similar to appendChild(), but is different in the following ways.

  • append() allows you to also append strings, whereas Node.appendChild() only accepts Node objects.
  • append() has no return value, whereas Node.appendChild() returns the appended Node object.
  • append() can append several nodes and strings, whereas Node.appendChild() can only append one node.
    • meaning you can append several elements or strings at one time.

The process is very similar to using appendChild(). First we must determine an element we want to append. In this example we want to add (append) a bold [b] element to the end of this paragraph. So first, we need to select this [p] tag:

  • 1. const para = document.querySelectorAll('p')[8];
next we need to create the NEW empty element
  • 2. const newB = document.createElement('b');
next, we need to add the text to the new [b] element. Note that we could use either append() or innerText() for this, but append would allow you to add multiple text strings at one time.
  • 3. newB.append('I am the new Bold element', ' ', 'Some more text too');   //here we added 3 text items
    • - I am the new Bold element
    • - " " (a space)
    • - Some more text too
and finally, change the color of the new element and append (add) it to the end of the paragraph
  • 4. newB.style.color = '#961d1d';   (optional)
  • 5. para.append(newB);



prepend

prepend() works the same as append() but it inserts the new text or element at the beginning of the element specified.

First we must determine an element we want to prepend. In this example we want to add (prepend) an italic [i] element to the beginning of this section, which is contained within the 4th article element on this page. So first, we need to select this [article] tag:

  • 1. const art2 = document.querySelectorAll('article')[3];
next we need to create the NEW empty italic element,
  • 2. const newI = document.createElement('i');
next, we need to add the text to the new [i] element. Note that we could use either append() or innerText() for this, but append would allow you to add multiple text strings at one time.
  • 3. newI.append('I am a new Italic element');
and finally, change the color of the new element and prepend (add) it to the beginning of this article element.
  • 4. newI.style.color = '#961d1d';   (optional)
  • 5. art2.prepend(newI);



insertAdjacentElement

Instead of inserting a new element into an existing element structure, such as prepending or appending an element as we have demonstrated, we can also insert a new element adjacent to an existing element. You could not, for example, prepend or append a heading element because a heading element has no children to prepend or append to. But you could add an element adjacent to it.

In order to utilize insertAdjacentElement, you must specify the position where you want the new element to be placed, and the new element itself. here is the syntax:

  • targetElement.insertAdjacentElement(position, newElement);

    • targetElement - the element you wish to place the New element adjacent to

    • position - where to place the New element in relation to the targetElement
      • beforebegin - before the targetElement itself
      • afterbegin - just inside the targetElement, before its 1st child
      • beforeend - just inside the targetElement, after its last child
      • afterend - after the targetElement itself

Let's demonstrate. At the beginning of this section is the h6 element, insertAdjacentElement. We're going to add a NEW [p] element after this h6 element.

  • 1. select the [h6] targetElement
    • const tarEle = document.querySelectorAll('h6')[5];
  • 2. create the new element
    • const newP = document.createElement('p');
  • 3. insert text into the new element
    • newP.append('I am the New Paragraph');
  • 4. place the new element newP after the existing [h6] element
    • newP.style.color = '#961d1d'   // optional
    • tarEle.insertAdjacentElement('afterend', newP);

Back to Top