Question

我想从带有id post的div获取图像src，并希望将其附加到id为show-image的div中

此外，我想将javascript包装在一个函数中，以便我可以在网页中实现它

到目前为止我已经创建了这个

var theDiv = document.getElementById("show-image");
var tubeimg = document.getElementById('post-img').getAttribute('src');
theDiv.innerHTML += "<img src=" +tubeimg+ " />";

用于Html编码

<div id='show-image'>
</div>
<div id='post'>
<div class='inner'>
<img id='post-img' src='http://3.bp.blogspot.com/-Sg5t3utxRzc/UwgyzbLVAAI/AAAAAAAAFBo/vYQX0Cphx8U/s1600/indian-bride.jpg'/>
</div>
</div

现在我正在使用document.getElementById("img id").getAttribute('src';，但我想要这个

var post = document.getElementById("post"),
var tubeimg = post.documentgetElementByTagName("img").getAttribute('src');

但是这不起作用我不知道我在哪里弄错了任何人请解决这个问题

我想要纯粹的javascript没有jquery

Answer 1

使用

var tubeimg = document.getElementsByTagName("img")[0].getAttribute('src');

它会返回您要迭代的NodeList。

Answer 2

getElementsByTagName获取一个nodeList，您需要该nodeList中的第一个元素

var post = document.getElementById("post"),
var tubeimg = post.getElementByTagName("img")[0].getAttribute('src');

querySelector比getElementByTagName有更好的支持，因此更容易做到

var tubeimg = document.querySelector('#post img').src;

哪会给你

var theDiv  = document.getElementById("show-image");
var tubeimg = document.querySelector('#post img').src
var image   = document.createElement('img');

image.src = tubeimg;

theDiv.appendChild(image);

FIDDLE

Answer 3

如果你想得到幻想：

document.getElementById('show-image').appendChild(
  new Image()
).src = document.querySelector('#post img').src;

OR

document.getElementById('show-image').innerHTML = '<img src="' + document.querySelector('#post img').src + '" />';

使用javascript attr src函数附加图像

3 个答案: