A Tricky Case of insertAdjacentHTML()
Tags: javascript, beginners, webdev
Published: 2021-01-27 15:02:32

# How to insert multiple adjacent JavaScript strings as HTML
As part of my commitment to [#100HoursOfJavaScript](https://twitter.com/nitecoda1) study with @wesbos [Beginner JavaScript](https://beginnerjavascript.com/), 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](https://twitter.com/nitecoda1)
[MDN Web Docs insertAdjacentHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML)
[Beginner JavaScript from @wesbos](https://beginnerjavascript.com/)