使用 javascript 将 img 元素添加到 div答案

【问题标题】：Adding an img element to a div with javascript使用 javascript 将 img 元素添加到 div
【发布时间】：2011-12-09 19:20:02
【问题描述】：

我正在尝试使用 JavaScript 将 img 添加到 placehere div，但是我没有运气。谁能帮我看看我的代码？

<html>
<script type="text/javascript">
var elem = document.createElement("img");
elem.setAttribute("src", "images/hydrangeas.jpg");
elem.setAttribute("height", "768");
elem.setAttribute("width", "1024");
elem.setAttribute("alt", "Flower");
document.getElementById("placehere").appendChild("elem");
</script>
<body>

<div id="placehere">

</div>

</body>
</html>

【问题讨论】：

标签： javascript dom

【解决方案1】：

document.getElementById("placehere").appendChild(elem);

不是

document.getElementById("placehere").appendChild("elem");

并使用以下设置来源

elem.src = 'images/hydrangeas.jpg';

【讨论】：

好的，我把 var 从引号中去掉了，但我仍然看不到图像
@AndrewDeForest:appendChild 需要一个对象，然后它应该可以工作，除非您的图像路径错误。检查这个jsfiddle.net/naveen/S57rs
嗯，我不知道。我将其更改为 elem.src = "images/hydrangeas.jpg" 仍然看不到它。我什至写出了标签只是为了确保路径正确，然后它就出现了。
你确定脚本运行了吗？
我认为我的脚本在 DOM 完成加载之前正在运行，所以我添加了 document.addEventListener("DOMContentLoaded", function() 并且它似乎修复了它！

【解决方案2】：

应该是：

document.getElementById("placehere").appendChild(elem);

将div 放在javascript 之前，因为如果不这样做，javascript 会在div 存在之前执行。或者等待它加载。所以你的代码看起来像这样：

window.onload = function() {
  var elem = document.createElement("img");
  elem.setAttribute("src", "http://img.zohostatic.com/discussions/v1/images/defaultPhoto.png");
  elem.setAttribute("height", "768");
  elem.setAttribute("width", "1024");
  elem.setAttribute("alt", "Flower");
  document.getElementById("placehere").appendChild(elem);
}

&lt;div id="placehere"&gt;&lt;/div&gt;

为了证明我的观点，请参阅 with the onload 和 without the onload。启动控制台，你会发现一个错误，指出div 不存在或找不到null 的appendChild 方法。

【讨论】：

忘记所有的setAttribute调用，直接设置属性：elem.src = ...; elem.height = ...; elem.alt = ...;等等。
同意，但据我所知，使用这种方法没有缺点。也许我们应该对 JSPerf 进行性能测试
JSPerf test 表明 setAttribute 实际上更快。不错。
性能上的差异可以忽略不计，但为了记录，here's one 在某些浏览器中则相反。更重要的是 setAttribute 跨浏览器的不一致与设置属性的一致性。在兼容 HTML5 的浏览器中，两者做同样的事情，因此在此类浏览器中的性能几乎相同也就不足为奇了。
如果你不附加它可能会更快。这就是我从那个测试中得出的结论。当然，关于一致性，你是对的。

【解决方案3】：

function image()
{
    //dynamically add an image and set its attribute
    var img=document.createElement("img");
    img.src="p1.jpg"
    img.id="picture"
    var foo = document.getElementById("fooBar");
    foo.appendChild(img);
}

<span id="fooBar">&nbsp;</span>

【讨论】：

【解决方案4】：

以下解决方案似乎是一个更短的版本：

<div id="imageDiv"></div>

在 Javascript 中：

document.getElementById('imageDiv').innerHTML = '<img width="100" height="100" src="images/hydrangeas.jpg">';

【讨论】：

【解决方案5】：

如果有人想知道如何使用 JQuery：

$("<img height='200' width='200' alt='testImage' src='https://avatars.githubusercontent.com/u/47340995?v=4'> </img>").appendTo("#container");

参考：https://api.jquery.com/jQuery/#jQuery2

【讨论】：