javascript - Javascriptを使用して画像にリンクを作成する方法

Question

<div id="mydiv">
<img src="myimage.jpg" />
</div>
<script language="javascript">
var a=document.createElement('a');
a.href='http://mylink.com';
document.getElementById('mydiv').appendChild(a);
</script>

画像にリンクを作成するスクリプトが機能しない

<div id="mydiv">
    <a href="http://mylink.com"><img src="myimage.jpg" /></a>
</div>

Answer 1

画像の後にリンクを貼っています。

リンク内に画像を移動する必要があります。

var image = document.getElementById('mydiv').getElementsByTagName('img')[0];
a.appendChild(image);

Answer 2

    <div id="mydiv">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Cat_November_2010-1a.jpg/220px-Cat_November_2010-1a.jpg" />
</div>

<script language="javascript">
var a=document.createElement('a');
a.href='http://mylink.com';
var image = document.getElementById('mydiv').getElementsByTagName('img')[0];
b=a.appendChild(image);
document.getElementById('mydiv').appendChild(a);
</script>

アイデアをありがとう。この作品

Answer 3

追加の div を必要とせず、HTML ページ内のすべての画像の周りにリンクを配置するソリューションを次に示します。

<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>

<script type="text/javascript" charset="utf8">
  $(document).ready(function(){
    var images = document.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
      var image = images[i];
      var parentElement = image.parentElement;
      var a = document.createElement('a');
      a.href = image.getAttribute('src');
      a.appendChild(image);
      parentElement.appendChild(a);
    }
  });
</script>