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`>");

it should work !! , but as a workaround you could do as , take a new variable as let srcURL = `http://download.images.com/meetandcode/2020/images/groups/${groupId}.png` — KcH, Mar 07 '21 at 13:22
Hi, ok, this is the code I will use to set the srcURL----> let srcURL = `http://download.runtastic.com/meetandcode/mobile_and_web_2016/images/groups/${groupId}.png` But after this, I have to use the insertAdjacentHTML and I have the same problem as before. Look at here: addGroup.insertAdjacentHTML("beforebegin", " — RudyonRails, Mar 07 '21 at 13:33

score 0 · Answer 1 · answered Mar 07 '21 at 15:00

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>

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

1 Answers1