【初心者向け】JavaScriptでHTMLの書き換え方法を解説！

JavaScriptの関数や繰り返しなどの基本は学習した。

であれば、その次はいよいよHTMLで作成したページへの組み込みをされる方が多いのではないでしょうか。

今回はJavaScriptでのHTML操作の基本である

• HTMLの書き換え方法

について解説をしていきたいと思います。

HTMLの書き換え方法

JavaScriptでHTMLを操作する場合、いきなり初めてのプロパティやメソッドが出てきますので、急に難しく感じるかもしれません。

ですので、まずは基本的な仕組みをシンプルに理解することが大切です。

基本的な仕組みというのは、

• HTMLの「どの要素に対して」「なんの操作をするか」

です。

「どの要素に対して」を指定する

まずは「どの要素に対して」を指定する方法から見ていきましょう。

id指定する方法

要素のid名で要素を指定する場合の方法です。

例えば、id=”hoge”のついた要素を指定する場合はこのように書きます。

 CSSセレクタで指定する方法

CSSセレクタで要素を指定する場合の方法です。

例えば、h1タグを指定する場合はこのように書きます。

「なんの操作をするか」を指定する

どの要素かを指定できるようになったら、今度は「何の操作をするか」の方法を見ていきましょう。

今回は「書き換え」というテーマでのお話ですので、要素ないの文字の書き換え方法について見ていきます。

テキストだけを書き換える

まずは要素ないのテキストだけを書き換える方法です。

innerTextプロパティを使用しますが、例を見ていきましょう。

まずはこんなHTMLがあるとします。

この場合、ブラウザで開くとこのように表示されるはずです。

今度はJavaScriptを加えてみます。

これでブラウザで開くとこのように表示されるはずです。

要素ごと書き換える

今度は、タグごと書き換える方法です。

innerHTMLプロパティを使用しますが、例を見ていきましょう。

では同じようにJavaScriptを加えてみた例を見ていきます。

これでブラウザで開くとこのように表示されるはずです。

あくまでもpタグの中身を置き換えているだけですので、pタグがなくなったわけではありません。

開発ツールで確認いただければお分かりだと思いますが、上記の置き換えで下記のようなHTMLになっています。

元のタグごと消えるわけではありませんのでご注意ください。

まとめ

今回は、これからJavaScriptでHTML要素の置き換えをされる方向けに

• HTMLの書き換え方法

について解説いたしました。

ここを理解できればfor文の基本的な使い方はOKですので是非マスターしてみてください。