ページ内の特定クラスに属する要素をJavaScriptで置き換える方法

ページ内の特定クラスに属する要素をJavaScriptで置き換える方法

ページ内の特定クラスに属する要素をJavaScriptで置き換える方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加


  • ベテランカードホルダーが厳選したおすすめのクレジットカード
  • このエントリーをはてなブックマークに追加

「特定のクラスに属する要素の中身を置き換える方法はないか?」という質問をいただいたので、回答として記事を書きたいと思います。置き換える対象の要素はテキストで、これをリンクに変えたいということでした。

JavaScriptはあまり得意ではありませんが、なんとかテキストをリンクに置換することができました。

スポンサードリンク

ページ内の特定クラスに属する要素をJavaScriptで置き換える

今回中身を置き換えるクラスは、replacementとします。HTML側はこんな感じで、シンプルにdiv要素を並べただけです。

<div class="replacement">置換前</div>
<div class="replacement">置換前</div>
<div class="replacement">置換前</div>

JavaScript側は、以下のように記述します。HTMLファイルのヘッダー内に記述しましょう。

<script type="text/javascript">
<!--
window.onload=function() {
var $replacement = document.getElementsByClassName( "replacement" );
for (i = 0; i < $replacement.length; i++) {
$replacement[i].innerHTML = '<a href="http://example.com">置換後リンク</a>';
}
}
// -->
</script>

このようにページをロードした際に、innerHTMLを使って要素の中身を置換するようにしています。

JavaScriptコードの解説

window.onloadでページをロードした時の動作を定義します。

まずgetElementsByClassNameで特定のクラスに属する要素を取り出します。

これをそのままinnerHTMLで置き換えてもいいんですが、そうすると最初の1つしか置き換えられません。なので、for文を使って、replacementクラスがなくなるまで繰り返し処理を実行する必要があります。

繰り返し処理は、iが$replacementに入ったクラスの数を超えるまで実行します。

$replacement[i].innerHTMLで、要素の中身を順番に置き換えていきます。これにより、

<div class="replacement">置換前</div>

“置換前”というテキストが、

<div class="replacement"><a href="http://example.com">置換後リンク</a></div>

というリンクに置換されます。

あとがき

クラスではなくてIDで指定したいときは、getElementsByClassNameではなくgetElementByIdを使います。IDはページ内に一つしかないはずなので、IDで指定する場合は繰り返し処理は必要ありません。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。