logo标签列表

使用JavaScript向div元素添加img元素

javascriptdom
80

我正在尝试使用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>
5个回答
85
document.getElementById("placehere").appendChild(elem);

不是

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

然后使用以下内容设置来源

elem.src = 'images/hydrangeas.jpg';
1
好的，我把变量从引号中拿出来了，但我仍然看不到图片。 - Andrew De Forest
@AndrewDeForest：appendChild需要一个对象，然后它应该可以工作，除非您的图像路径错误。请检查此链接http://jsfiddle.net/naveen/S57rs/。 - naveen
哦，我不知道。我把它改成了elem.src = "images/hydrangeas.jpg"，但我仍然看不到它。我甚至手写了标签<img src="images/hydrangeas.jpg">以确保路径正确，并且它显示出来了。 - Andrew De Forest
你确定脚本能够运行吗？ - Ghyath Serhal
3
我觉得我的脚本在DOM完成加载之前运行了，所以我加了document.addEventListener("DOMContentLoaded", function()，看起来解决了问题! - Andrew De Forest
32

应该是：

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

在你的javascript前面放置你的

元素，因为如果你不这样做，javascript会在
元素存在之前执行。或者等待它加载完成。所以你的代码应该像这样：

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);
}
<div id="placehere"></div>

为了证明我的观点，请查看此具有onload的示例和此没有onload的示例。启动控制台，您会发现一个错误，说明
不存在或找不到null的appendChild方法。
忘记所有的 setAttribute 调用，直接设置属性：elem.src = ...; elem.height = ...; elem.alt = ...; 等等。 - RobG
1
同意，但据我所知，使用这种方法没有任何缺点。也许我们应该在JSPerf上进行性能测试。 - Some Guy
JSPerf测试显示setAttribute实际上更快。不错。 - Some Guy
性能上的差异微不足道，但是为了记录，这里有一个在某些浏览器中会反过来。更重要的是，在不同浏览器中setAttribute的一致性与设置属性的一致性不同。在符合HTML5标准的浏览器中，两者做的事情是相同的，因此在这样的浏览器中性能几乎相同，这并不令人惊讶。 - RobG
也许如果你不追加它会更快。这是我从那个测试中推断出来的。当然，你关于一致性的观点是正确的。 - Some Guy
setAttribute 是一个宿主方法，具有指定的结果但没有其他内容，访问宿主对象的属性也是如此。这与调用 ECMAScript 本地函数与对象属性访问非常不同（在这种情况下，函数调用应始终较慢）。在宿主情况下，设置属性可能正好做了 setAttribute 所做的事情（反之亦然），因此哪个更快只是运气问题。还很难将这两个操作隔离开来，使它们独立于其他处理。 - RobG
5
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>
2
以下解决方案似乎是更短的版本:

以下解决方案似乎是更短的版本:

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

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

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

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

Ref: https://api.jquery.com/jQuery/#jQuery2

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接