使用javascript重写HTML代码

Question

我在这里有一些标记，需要使用javascript重新格式化。 基本上，我有以下代码：

    <div id="images">    
      <img src="01.jpg">
      <img src="02.jpg">
      <img src="03.jpg">
      <img src="04.jpg">
      <a id="src" href="01.jpg"></a>
      <a id="src" href="02.jpg"></a>
      <a id="src" href="03.jpg"></a>
      <a id="src" href="04.jpg"></a>
    </div>

并且我希望javascript重写代码，以便将图像放置在锚点内。 像这样：

    <div id="images">    
      <a id="src" href="01.jpg"><img src="01.jpg"></a>
      <a id="src" href="02.jpg"><img src="02.jpg"></a>
      <a id="src" href="03.jpg"><img src="03.jpg"></a>
      <a id="src" href="04.jpg"><img src="04.jpg"></a>
    </div>

有任何想法吗？

Answer 1

<script>
var div = window.document.getElementById("images");
var anchors = div.getElementsByTagName("A");
var imgs = div.getElementsByTagName("IMG");
for (var i = anchors.length - 1; i >= 0; i--) {
    anchors[i].appendChild(imgs[i]);
}
</script>

Answer 2

总体策略：

1. 获取对“图像” div的引用
2. 创建一个临时对象来存储图像，例如var imgs = {};
3. 循环遍历div中的所有img元素。 对于每个元素：
   • 使用src作为键将每个元素添加到imgs
4. 遍历所有a在div中的元素。 对于每个元素：
   1. 使用元素的href属性从imgs查找图像
   2. 从当前位置删除img ，然后将其重新插入a的主体内。