使用javascript attr-src函数附加图像

Append image using javascript attr src function

本文关键字：图像 函数 javascript attr-src 使用      更新时间：2023-09-26

我想从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

使用

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

它返回一个NodeList，您必须对其进行迭代。

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

如果你想变花样：

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

或

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