Javascript：将图像复制到变量中以放置在某处？

我是否可以使用javascript在页面上获取隐藏图像，将其定义为变量，然后将其放置在页面的其他位置

到目前为止，我认为我可以这样做：

HTML:

单击以显示图像

JAVASCRIPT:

var images = document.getElementById('images');

function createImgHtml() {
  return '<div>' + images + '</div>';
}

var images=document.getElementById（'images'）；
函数createImgHtml（）{
返回“”+图像+“”；
}

---

显然，这在目前还不起作用，因为我不知道如何为包含图像的

编写HTML。如何更改函数，使其使用变量实际创建HTML代码并将其放置在页面上？

将id添加到

img

HTML

<img src="http://example.com/blah.jpg" id="images" />

JS

const images = document.querySelector('#images')
const imageSrc = images.getAttribute('src');

function createImageHtml() {
  return `<div>${imageSrc}</div>`;
}

const images=document.querySelector（“#images”）
const imageSrc=images.getAttribute（'src'）；
函数createImageHtml（）{
返回`${imageSrc}`；
}

链接：

---

我不确定我是否完全理解您的意思，但这里可能有一些答案可以帮助您

• 您可以将一个类添加到所有要隐藏的图像中，然后使用javascript通过类名获取该类，并在其中循环

• 为什么不使用存储图像数组

您可以循环通过它，甚至可以让对象

您可以使用javasript打印到屏幕上。请在此处阅读更多信息

---

如果我理解正确，您不需要移动图像，而是显示它（使其不隐藏）

通过从包含的

div

中删除类

hidden

，可以很容易地做到这一点：

HTML:

<div id="images" class="images hidden">
  <img src="http://lorempixel.com/200/200/cats/" style="">
</div>


<div>
  <button onclick="showImage">Click to show image</button>
</div>

function showImage() {
  var images = document.getElementById('images');
  images.className = images.className.replace('hidden',' ');
}

注意：我将

onclick

属性移动到

按钮，而不是
div


函数showImage（）{
var images=document.getElementById（'images'）；
images.className=images.className.replace（'hidden'，''）；
}
。隐藏{
dispaly：无；
}

单击以显示图像
这取决于您存储/使用图像的方式

同样的范围
您已经将dom保存在变量中，为什么要创建html

其他
首先对dom对象进行字符串化，然后保存到任何位置

下面是相同运行时范围的代码，只需克隆任意数量的dom，并将其附加到文档中即可


var images=document.getElementById（'images'））
images2=images.cloneNode（）
images2.className=“图像”
var img=document.getElementsByTagName（'img'）[0]
var body=document.getElementsByTagName（'body'）[0]
函数createImgHtml（）{
body.appendChild（images2.cloneNode（）.appendChild（img.cloneNode（））
//返回“”+图像+“”；
}
。隐藏{
显示：无；
}

单击以显示图像

function showImage() {
  var images = document.getElementById('images');
  images.className = images.className.replace('hidden',' ');
}