「特定のクラスに属する要素の中身を置き換える方法はないか？」という質問をいただいたので、回答として記事を書きたいと思います。置き換える対象の要素はテキストで、これをリンクに変えたいということでした。
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で指定する場合は繰り返し処理は必要ありません。