JavascriptでHTMLを書き換えたい

2013/11/29 01:34

このQ&Aのポイント

Javascriptを使用してHTMLを書き換える方法を教えてください。
window.onload関数を使用して、HTMLの特定の要素を書き換えることは可能ですか？
HTMLの特定の要素にリンクを表示したいのですが、どのように記述すればいいですか？

noname#225112

JavaScript
回答数3
ありがとう数6

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

Ogre7077
ベストアンサー率65% (170/258)

2013/11/29 09:52 回答No.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 = 中身});

質問者

お礼 2013/11/29 12:28

簡潔でわかりやすいご説明ありがとうございます！

ログインすると、全ての回答が全文表示されます。

その他の回答 (2)

play_with_you
ベストアンサー率37% (112/301)

2013/11/29 09:37 回答No.2

まず、<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)

2013/11/29 09:32 回答No.1

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

ログインすると、全ての回答が全文表示されます。