javascript - 如果要插入的字符串中有来自 JavaScript 的变量，如何插入 AdjacentHTML？该字符串不采用 ${groupId} 的值

Question

这是我的 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>

这是我尝试与 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

这个对我有用。我认为问题在于您使用 double ( ") 来包含 html 和class属性值，这会使浏览器感到困惑，因为它无法确定元素的结束位置。将其中任何一个更改为单 ( ') 引号。

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>