How to insertAdjacentHTML if in the string to insert there is variable from JavaScript? The string doesn't take the value of ${groupId}

Question

This is my HTML:

<li><a href="/Simpson.html">
  <div class="item-row">
<!-- I WANT TO insertAdjacentHTML HTML HERE  -->
    <div id= "simpsons" class="item-infos">
      <h2>Simpson</h2>
        <p> <strong>6 members</strong> </p>
    </div>
  </div>
</a></li>

This is the code I tried to use with the insertAdjacentHTML:

let groupId = 1; 
let addGroup = document.querySelector("#simpsons");
addGroup.insertAdjacentHTML("beforebegin", "<img class="img-circle" src= `http://download.images.com/meetandcode/2020/images/groups/${groupId}.png`>");

Answer 1

It works for me. I think the issue is you are using double (") to enclose both the html and the class attribute value, this confuses the browser as it cant determine where the element is ending. Change either one of it to single (') quote.

let addGroup = document.querySelector("#simpsons");
addGroup.insertAdjacentHTML("beforebegin", "<img class='img-circle' src= http://download.images.com/meetandcode/2020/images/groups/${groupId}.png>");

<li><a href="/Simpson.html">
  <div class="item-row">
<!-- I WANT TO insertAdjacentHTML HTML HERE  -->
    <div id= "simpsons" class="item-infos">
      <h2>Simpson</h2>
        <p> <strong>6 members</strong> </p>
    </div>
  </div>
</a></li>