在 JavaScript 中为数组的每个对象生成 HTML 中的图像标签

generate image tags in html for each object of an array in Javascript

本文关键字：图像 标签 对象 HTML JavaScript 数组      更新时间：2023-09-26



我知道我的问题可能看起来很愚蠢，但我被这几段代码困住了，我在 Javascript 上挣扎。
我希望能够在我的页面内显示一些链接文本中的一些图像。它可能看起来很扭曲，但这正是我想做的：-）
到目前为止，这就是我设法解决的问题，如果这可以给你一个想法：

<a href="#">http://www.online-image-editor.com/styles/2013/images/example_image.png</a>
<a href="#">http://images.math.cnrs.fr/IMG/png/section8-image.png</a>
<a href="#">http://www.online-image-editor.com/styles/2013/images/example_image.png</a>



var liens = document.getElementsByTagName('a'),
valeurs = [];
for (i = 0; i < liens.length; i += 1) { 
 if (liens[i].text) {        
    valeurs.push(liens[i].text);
    document.body.innerHTML = "<img src='" + valeurs[i] + "'>";
  }
}

谢谢！

好吧，你快到了。对代码最简单的修复是更改此行：

document.body.innerHTML = "<img src='" + valeurs[i] + "'>";

进入这个：

document.body.innerHTML += "<img src='" + valeurs[i] + "'>";

这将附加到innerHTML而不是覆盖它。

一个稍微好一点的解决方案是实际创建 DOM 节点而不是修改innerHTML 。因此，上面的行可以替换为：

var img = document.createElement('img');
img.src = valeurs[i];
document.body.appendChild(img);

你可以在这里查看

相关文章：