如何通过 JavaScript 插入 HTML 元素？ [复制]答案

【问题标题】：How to insert HTML element via JavaScript? [duplicate]如何通过 JavaScript 插入 HTML 元素？ [复制]
【发布时间】：2020-05-27 15:00:59
【问题描述】：

我想在 ID 为“window”的 div 标签中插入一张图片：

<div id="window">
        <h3 id="score">Score: 0</h3>
        <h3 id="end">End Game</h3>
        <video autoplay muted loop id="myVideo">
            <source src="images/background.mp4" type="video/mp4">
        </video>
    </div>

我的函数看起来像 atm：

function spawn1() {
document.getElementById("window").innerHTML = "<img src='images/redtarget.png' style='width:10%'>";
}

如何在不使用 .innerHTML 的情况下插入 HTML 元素，因为它会替换我的 div 标签中的所有内容？

【问题讨论】：

它是 document.getElementById("window").append('<img src="images/redtarget.png" style="width:10%">') 并且您可以使用 createElement 而不是将图像元素作为字符串
@admcfajn 你确定是document.getElementById("window").innerHTML.append 吗？
感谢@AbhishekPandey，这是漫长的一天！
这能回答你的问题吗？ Adding HTML elements with JavaScript

标签： javascript html css

【解决方案1】：

如果您想将图像附加到您的 div 中，您可以执行以下操作：

function spawn1() {
    let imageElement = document.createElement('img');
    imageElement.setAttribute('src','images/redtarget.png');
    imageElement.setAttribute('id', 'imageId');   //Use the id for a CSS selector to style it
    let windowDiv = document.getElementById("window");
    windowDiv.appendChild(imageElement);
  }

【讨论】：

【解决方案2】：

像下面这样简单地连接现有的 html。

function spawn1() {
    document.getElementById("window").innerHTML = document.getElementById("window").innerHTML + "<img src='images/redtarget.png' style='width:10%'>";
}

这里是jsfiddle 链接：https://jsfiddle.net/gpkquwz0/

【讨论】：

为什么不将innerHTML 存储在var 中，而不是一次又一次地编写它

【解决方案3】：

elem.innerHTML = elem.innerHTML + myNewStuff;

【讨论】：

不鼓励使用纯代码的答案。请解释您的答案为何以及如何解决问题。
@IgorF.：是的，不鼓励仅使用代码的答案。但它们仍应在低质量帖子队列中被视为“看起来不错”。参考：meta.stackoverflow.com/questions/260411/…