javascript - 单击时复制同一行上的图像

Question

我试图在点击时制作一行图像，但它们显示在我页面底部的 div 标签之后，是 document.body.innerHTML 让它这样做吗？

     flowers = 1;

     function makeFlower() {

        if (flowers < 10 ){document.body.innerHTML +="<img src='flower.jpg'>";
        flowers ++;
            }
}


<p> Make a happy garden by clicking the flower many times! </p>
    <p><img src="flower.jpg"
            onClick="makeFlower()">
            </p>

Answer 1

通过使用document.body.innerHTML +=（+=很重要），您将内容附加到文档的正文中。

您应该在id包含图像的段落中添加一个（属性）：

<p id="garden">
    <img src="flower.jpg" onClick="makeFlower()">
</p>

现在您可以garden使用以下目标document.getElementById("garden")：

flowers = 1;
function makeFlower() {

    if (flowers < 10 ) {

        document.getElementById("garden").innerHTML +="<img src='flower.jpg'>";

        flowers ++;
    }
}

这会让你开始。