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

Posted 2023-05-07

【中文标题】如何通过 JavaScript 插入 HTML 元素？ [复制]

【英文标题】：How to insert HTML element via JavaScript? [duplicate]

【发布时间】：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

【参考方案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.***.com/questions/260411/…