如何将 .createElement("image") 也制作成链接答案

【问题标题】：How to make .createElement("image") into a link as well如何将 .createElement("image") 也制作成链接
【发布时间】：2014-10-13 19:06:24
【问题描述】：

我已经设法让图片以我想要的方式列出，现在我希望每张图片都是一个链接，指向它自己的 URL

现在是什么：

<img src="01.jpg" />

我想要的：

<a href="01.jpg" target="_new"><img src="01.jpg" /></a>

当前代码：

<script>
  var fullLink = 'http://www.website.com/'; //Public URL
  var ext = ".jpg"; //File Extension 

  for ( var i = 1; i < 6 ; i++ ) {
    var link = document.createElement('a');
    var elem = document.createElement("img");
    if (i < 10) {
      link.setAttribute("href", fullLink+"0"+i+ext);
      elem.setAttribute("src", fullLink+"0"+i+ext);
    } else {
      link.setAttribute("href", fullLink+i+ext);
      elem.setAttribute("src", fullLink+i+ext);
    }
      elem.setAttribute("height", "250px");
      document.getElementById("images").appendChild(link);
      document.getElementById("images").appendChild(elem);
  }
</script>

【问题讨论】：

谁对这个问题投了反对票？这个问题显示了合理的努力、尝试的解决方案、预期的输出和当前的输出。它的格式很好，符合站点标准。不是每个人都知道有关 javascript 的所有知识，或者在出现问题时足以进行搜索。
请参阅this fiddle 以获得解决方案和其他一些修改。您不应该在每个循环中查找 document.getElementById("images")。相反，在for 之前执行一次并将其保存为变量。还有更简单的方法来填充图像编号以降低圈复杂度并提高可读性。

标签： javascript html image hyperlink createelement

【解决方案1】：

<script>
  var fullLink = 'http://www.website.com/'; //Public URL
  var ext = ".jpg"; //File Extension 

  for ( var i = 1; i < 6 ; i++ ) {
    var link = document.createElement('a');
    var elem = document.createElement("img");
    if (i < 10) {
      link.setAttribute("href", fullLink+"0"+i+ext);
      elem.setAttribute("src", fullLink+"0"+i+ext);
    } else {
      link.setAttribute("href", fullLink+i+ext);
      elem.setAttribute("src", fullLink+i+ext);
    }
      elem.setAttribute("height", "250px");
      link.appendChild(elem);  //<----
      document.getElementById("images").appendChild(link);
  }
</script>

这应该是您正在寻找的。它将您创建的 img 作为您创建的锚定链接的子项。

无需将图像附加到图像 ID，因为它现在包含在 link 中。

【讨论】：