DEV Community

Mark "niteCoda" Freeman
Mark "niteCoda" Freeman

Posted on

1

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);
Enter fullscreen mode Exit fullscreen mode

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>
`;
Enter fullscreen mode Exit fullscreen mode

Now we'll add those contents inside the wrapper:

wrapper.innerHTML = (list);
Enter fullscreen mode Exit fullscreen mode

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>
`;
Enter fullscreen mode Exit fullscreen mode

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');
Enter fullscreen mode Exit fullscreen mode

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);
Enter fullscreen mode Exit fullscreen mode

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

SurveyJS custom survey software

Simplify data collection in your JS app with a fully integrated form management platform. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more. Integrates with any backend system, giving you full control over your data and no user limits.

Learn more

Top comments (0)

Image of AssemblyAI

Automatic Speech Recognition with AssemblyAI

Experience near-human accuracy, low-latency performance, and advanced Speech AI capabilities with AssemblyAI's Speech-to-Text API. Sign up today and get $50 in API credit. No credit card required.

Try the API

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay