- ベストアンサー
JavascriptでHTMLを書き換えたい
- Javascriptを使用してHTMLを書き換える方法を教えてください。
- window.onload関数を使用して、HTMLの特定の要素を書き換えることは可能ですか？
- HTMLの特定の要素にリンクを表示したいのですが、どのように記述すればいいですか？
- JavaScript
- 回答数3
- ありがとう数6
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
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 = 中身});
その他の回答 (2)
- play_with_you
- ベストアンサー率37% (112/301)
まず、<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
- ベストアンサー率51% (3827/7415)
まずgetElementsByClassName()は戻り値が配列形式になります getElementsByClassName("orange1")[0]、などのようなアクセスの仕方をしてください ただしブラウザによってぶれもあるためあまりお勧めしません。 そもそもクラス名でアクセスする場合、同じクラス名を複数のタグが共有していたり ひとつのタグで複数のクラス名を持っていたりするため処理は煩雑になります 可能であればidで指定してやることをお勧めします
お礼
簡潔でわかりやすいご説明ありがとうございます！