使用javascript重写HTML代码

我这里有一些标记，需要使用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>

有什么想法吗？

总体战略：

获取对“images”div的引用

创建一个临时对象来存储图像，例如

varimgs={}

在分区内的所有

img

元素上循环。对于每个元素：

• 使用其

  src

  作为键，将每个元素添加到

  imgs

在div内的所有

a

元素上循环。对于每个元素：

使用元素的

href

属性从

imgs

查找图像

将

img

从其当前位置移除，然后将其重新插入

a

主体中

总体战略：

获取对“images”div的引用

创建一个临时对象来存储图像，例如

varimgs={}

在分区内的所有

img

元素上循环。对于每个元素：

• 使用其

  src

  作为键，将每个元素添加到

  imgs

在div内的所有

a

元素上循环。对于每个元素：

使用元素的

href

属性从

imgs

查找图像

将

img

从其当前位置移除，然后将其重新插入

a

主体中

var div=window.document.getElementById（“图像”）；
var anchors=div.getElementsByTagName（“A”）；
var imgs=div.getElementsByTagName（“IMG”）；
对于（var i=anchors.length-1；i>=0；i--）{
锚[i].appendChild（imgs[i]）；
}

var div=window.document.getElementById（“图像”）；
var anchors=div.getElementsByTagName（“A”）；
var imgs=div.getElementsByTagName（“IMG”）；
对于（var i=anchors.length-1；i>=0；i--）{
锚[i].appendChild（imgs[i]）；
}

顺便说一下，您不能在多个位置使用

id=“src”

。在整个文档中，每个

id

值必须是唯一的。禁用javascript时，链接是否有任何用途？如果是这样的话，用jQuery创建链接可能会更容易。我不知道为什么要添加id。我们可以移除它。使用jquery Gareth更容易做到这一点。请参阅我们得出的结论。顺便说一下，您不能在多个位置使用

id=“src”

。在整个文档中，每个

id

值必须是唯一的。禁用javascript时，链接是否有任何用途？如果是这样的话，用jQuery创建链接可能会更容易。我不知道为什么要添加id。我们可以移除它。使用jquery Gareth更容易做到这一点。请参阅我们提出的内容。（假设图像和/或链接没有特定顺序）（假设图像和/或链接没有特定顺序）

<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>