![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
以下のような 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ランキング
-
複数の要素へ appendchild でき...
-
Slick.jsのオプションrtlについて
-
スライドショーの画像にリンク...
-
MAX関数を使ってからLEFT JOIN...
-
読み込んだQRコードをフォーム...
-
前回の質問の続き
-
jQueryスライドショー画像への...
-
JavaScriptで変更した属性の元...
-
条件分岐でキーが入力されてい...
-
iframe内のリンクが飛ばないの...
-
【HTML、VBScript】HTAでのイベ...
-
JavaScriptで、?マークとコロ...
-
JavaScript スライドの画像にリ...
-
onclickとonmouseoverを同時に...
-
2階層のメニューを作ってjQuery...
-
createElementで作成した要素を...
-
大量のチェックボックス状態取...
-
javascriptテキストBOX色を元に...
-
画像をランダムな座標に一定の...
-
バッチファイルでカウントアッ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
同一ページ内の複数のタグに同...
-
【jQuery】2分割レイアウトで、...
-
キャラクターがぴょこんと飛び...
-
画像をフェードアウト&フェー...
-
jqueryのプラグインslickの画像...
-
html5に変えるとスライドショー...
-
Javaスクリプトで画像を縦にス...
-
high slideをFC2ブログで
-
ご教授ください。
-
jQueryでタブ、スライダーを使...
-
チェックボックスと画像切替の連動
-
jQueryのclickイベントハンドラ
-
javascriptで文字サイズの変更
-
fontsize.jsでhtmlの大中小の設...
-
【iOS及びAndroid】リンク画像...
-
Firefoxとクロームでフェードイ...
-
javascript src書き換え
-
神経衰弱 順番に裏返し
-
アコーディオンメニューが開い...
おすすめ情報