如果要插入的字符串中有来自JavaScript的变量，如何插入相邻的HTML？该字符串不采用 ${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

适合我。我认为问题是你正在使用双(")来包围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>