A Tricky Case of insertAdjacentHTML()

How to insert multiple adjacent JavaScript strings as HTML

As part of my commitment to #100HoursOfJavaScript study with @wesbos Beginner JavaScript, I stumbled upon a tricky challenge as part of the DOM Cardio - a series of small tests designed as a JavaScript workout. It really is!

I'm obviously a JavaScript beginner and this seemingly simple challenge really had me stumped on several attempts. It may be simple to many and there may be several ways to solve it. In any case, I thought I'd share my solution with a little explanation. I hope it helps you get out of a pinch too and I'd be pleased to see how you might go about resolving in your own way.

The overall challenge, using JavaScript alone, is to create a wrapper div into which we'll add two child divs. One containing an unordered list of three items, the other, two paragraphs.

Breaking down the challenge

1. Create a div with the class of wrapper and add it to the document body:

This first part shouldn't be too much trouble and here are the three lines of code we'll use:

const wrapper = document.createElement('div');
wrapper.classList.add('wrapper');
document.body.appendChild(wrapper);

2. Make an unordered list containing three list items, and place this list inside the wrapper.

This next step isn't too tricky either. We'll make use of backticks to make creation quick and easy:

 const list = `
  <ul>
    <li>list item one</li>
    <li>list item two</li>
    <li>list item three</li>
  </ul>
`;

Now we'll add those contents inside the wrapper:

wrapper.innerHTML = (list);

3. Using an HTML string, create another div with two paragraphs inside of it.

We already know how to do this, repeat the process above:

const div = `
  <div class="paragraphs">
    <p>Paragraph One</p>
    <p>Paragraph Two</p>
  </div>
`;

4. Now insert this new div before the unordered list from above.

And this is where things got tricky for me..........

We now need to insert the variable div (with the two paragraphs) adjacent to (before) the variable list. My go to solution was to use insertAdjacentHTML(), but that won't work.

Why?

Because the list content we created earlier in our code is a string, not HTML. That means we can't target it with this method...... yet.

Then how?

The way I went about solving this was by creating another variable listElement using querySelector().

const listElement = document.querySelector('ul');

The querySelector() method will target the ul inside the list string and the new variable listElement (we could have called it whatever we like) will hold valid HTML elements that will work alongside insertAdjacentHTML().

Now we can set about targeting the UL element, then placing our paragraphs div alongside using insertAdjacentHTML().

listElement.insertAdjacentHTML('beforebegin', div);

Note that insertAdjacentHTML() takes in two parameters for the insertion point: ('location' and the insertion). We wanted to insert the paragraphs before the list so we used beforebegin as our insertion point.

The range of location options are:

• beforebegin = before element
• afterbegin = before first child of element
• beforeend = after last child of element
• afterend = after element

LINKS

@nitecoda
MDN Web Docs insertAdjacentHTML
Beginner JavaScript from @wesbos