JavascriptでHTMLを書き換えたいのです

Question

うまく動作しないJavascriptなのですが、こういった方法は可能なのでしょうか？お分かりになりましたらご教授お願いします。 -------------------- ■html

オレンジ１です

オレンジ２です

オレンジ３です
-------------------- ■Javascript 記述は最下部の直前です。 -------------------- ■やりたい事

の部分に商品はコチラを表示したいと思っています。同一ページに複数回表れる場合もあります。よろしくお願い致します。

Ogre7077 · Accepted Answer

0個以上の複数対象に同一の操作を行う簡単な記述
var a = Array.prototype.slice.apply(document.getElementsByClassName(クラス名));
a.forEach(function(e){e.innerHTML = 中身});

もっと簡単な記述
Array.prototype.forEach.call(document.getElementsByClassName(クラス名), function(e){e.innerHTML = 中身});

さらに簡単な記述
[].forEach.call(document.getElementsByClassName(クラス名), function(e){e.innerHTML = 中身});

play_with_you · Answer

まず、<script>を</body>直前に入れる理由は何でしょうか？
<script>は「本文」ではないのですから、よほどのことがない限り<head>に入れましょう。
読み込み順を気にしているのかもしれませんが、window.onloadに処理を設定するコードになっているのですからそこは関係ありません。それともwindow.onloadの意味を知らずなんとなくコピペしたんでしょうか？
次に、本文に示したHTML部分は何かのブロックに入っていますか？<body>直下に<div>以外に囲まれていないインライン要素を置くのは文法違反です（HTML5ではOKですがたぶん違いますよね）。
最後に、classがJSでは「orange」ですがHTMLでは「orenge」です。これは元ソースからのミスですか？もし手打ちで間違えている場合、回答者が困りますので、今度からは必ずコピペしてください。

さて本題です。
丸括弧を使うのは「関数に引数を渡すとき」だけだと覚えてください。
innerHTMLは「プロパティ」であり、それに値を設定するのですから、丸括弧は不要です。
また、classは同じものが複数存在しうるので、getElementByClassNameは単一の要素ではなくノードリストを返します。
ということで、HTMLのほうのclassを「orange」に直したとして、こうです。

document.getElementsByClassName("orange1")[0].innerHTML = '<a href="./item/?item=orange1">商品はコチラ</a>';
document.getElementsByClassName("orange2")[0].innerHTML = '<a href="./item/?item=orange2">商品はコチラ</a>';
document.getElementsByClassName("orange3")[0].innerHTML = '<a href="./item/?item=orange3">商品はコチラ</a>';

なお、本文のソースでは判断できませんが、もし「orange1」などがHTML内に複数存在することがない場合、それはclassの使用には適していません。idを使うか、もしくはidもクラスも付けないかにしましょう。
何も付けなくても取得方法はいくつもありますので。

yambejp · Answer

まずgetElementsByClassName()は戻り値が配列形式になります
getElementsByClassName("orange1")[0]、などのようなアクセスの仕方をしてください
ただしブラウザによってぶれもあるためあまりお勧めしません。
そもそもクラス名でアクセスする場合、同じクラス名を複数のタグが共有していたり
ひとつのタグで複数のクラス名を持っていたりするため処理は煩雑になります

可能であればidで指定してやることをお勧めします

JavascriptでHTMLを書き換えたいのです

0個以上の複数対象に同一の操作を行う簡単な記述

まず、<script>を</body>直前に入れる理由は何でしょうか？

まずgetElementsByClassName()は戻り値が配列形式になります

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング