Question

I have some markup here that I need to reformat using javascript. Basically, I have this code:

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

and I want javascript to rewrite the code so that the images are placed inside the anchors. Like this:

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

any ideas?

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>