以下のような 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ベストアンサー
- 回答日時:
こうですかね?間違っていたらすいません・・・
<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 …
まさしくこうしたかったのです。どうもありがとうございます。
変数を宣言する場所が違っていたのですね。
紹介していただいたウェブページも見ながら、もっとお勉強したいと思います。
どうもありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS FC2カートのテンプレートでの商品表示について 1 2023/03/02 18:05
- その他(プログラミング・Web制作) pythonのWebスクレイピングでfind_allだとurlがNoneに 4 2022/04/17 18:21
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
javascript 神経衰弱
-
MAX関数を使ってからLEFT JOIN...
-
htmlの記述で link rel=styles...
-
画像の上に画像リンクを貼る方法
-
javascriptテキストBOX色を元に...
-
読み込んだQRコードをフォーム...
-
複数画像のランダム複数表示(...
-
【CSS】floatで左右に並べた...
-
Gifアニメ、最後のコマに行った...
-
クリックして変更した画像を他...
-
文字と数字が混在する要素のsor...
-
マウスを乗せるとメニュー表示
-
[急ぎ] videoタグで埋め込んだm...
-
画像ランダム表示、しかしダブ...
-
JavaScriptでサイコロのような...
-
Excel VBA マクロ 画像(...
-
ホームページビルダー15 メニュ...
-
divのheight指定で画面一杯に表...
-
タブで開いてさらにタブ内をア...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
アコーディオンメニューが開い...
-
横並びの画像を3枚時間差でフェ...
-
html5に変えるとスライドショー...
-
キャラクターがぴょこんと飛び...
-
jsでグリッドデザインのサムネ...
-
Javaスクリプトで画像を縦にス...
-
複数の要素へ appendchild でき...
-
CSSでマウスオーバーした画像を...
-
【iOS及びAndroid】リンク画像...
-
スライドショー「Skitter」をカ...
-
Dreamweaver上とデバイスプレビ...
-
同一ページ内の複数のタグに同...
-
スライド機能について
-
チェックボックスと画像切替の連動
-
jqueryのプラグインslickの画像...
-
Javascriptを使用したスライド...
-
bxSliderのランダム表示について
-
Firefoxとクロームでフェードイ...
おすすめ情報