複数の要素へ appendchild できません

質問

以下のような html があり、それぞれの画像リンクの後ろに <span>文章4</span>を追加したいのですが、できません。

元の html

<ol>
<li>文章1 <a href="a.jpg" ><img src="a_small.jpg" /></a></li>
<li>文章2 <a href="b.jpg"><img src="b_small.jpg" /></a></li>
</ol>

<p>文章3 <a href="c.jpg"><img src="c_small.jpg" /></a></p>

作りたい html

<ol>
<li>文章1 <a href="a.jpg" ><img src="a_small.jpg" /></a><span>文章4</span></li>
<li>文章2 <a href="b.jpg"><img src="b_small.jpg" /></a><span>文章4</span></li>
</ol>

<p>文章3 <a href="c.jpg"><img src="c_small.jpg" /></a><span>文章4</span></p>

以下のようなスクリプトを書いてみたのですが、どうしても最後の要素（この場合は3番目の画像）へしか <span>文章4</span> が追加されません。全ての a タグの要素へ追加するにはどうしたらいいのでしょうか。

window.onload = function() {
var addedSpan = document.createElement("span");
var addedTxt = document.createTextNode("文章4");
addedSpan.appendChild(addedTxt);

var imgs = document.getElementsByTagName ("a");
for (var i=0; i<imgs.length; i++) {
imgs[i].appendChild (addedSpan);
}
}

初歩的な質問でお恥ずかしいのですが、是非ご教授ください。どうぞよろしくお願いします。

回答No.1

n5123 · ベストアンサー

こうですかね？間違っていたらすいません・・・
<script type="text/javascript"><!--
window.onload = function() {
var imgs = document.getElementsByTagName("a");
for (i=0; i<imgs.length; i++){
var addedSpan = document.createElement("span");
var addedTxt = document.createTextNode("文章4");
addedSpan.appendChild(addedTxt);
imgs[i].appendChild(addedSpan);
}
}
--></script>

参考URL：

http://weblibrary.s224.xrea.com/weblog/webdesign/javascript/blockquotejavas_1.html

お礼

まさしくこうしたかったのです。どうもありがとうございます。
変数を宣言する場所が違っていたのですね。
紹介していただいたウェブページも見ながら、もっとお勉強したいと思います。
どうもありがとうございました。