HTML DOM - HTMLの変更

Volardev 編集部 April 18, 2026

1. HTMLコンテンツの変更

HTML DOMを利用することで、JavaScriptからHTML要素のテキストおよびコンテンツ（構造）の両方を変更することが可能になります。
コンテンツを修正する最も簡単な方法は、innerHTML プロパティを使用することです。

構文:document.getElementById(id).innerHTML = new HTML

2. innerHTMLプロパティ

要素のコンテンツを取得する最もシンプルな手法が、この innerHTML プロパティの参照です。
innerHTML プロパティは、HTML要素の内容を取得したり、あるいは新しい内容に置き換えたりする際に非常に便利です。
また、このプロパティは <html> や <body> を含む、あらゆるHTML要素に対して使用することができます。

3. よくある間違い

実装時によく発生するミスとして、以下の点が挙げられます。

DOM要素が存在する前にアクセスしようとする: スクリプトが実行される時点で、対象のHTML要素がまだ読み込まれていないケース。
ID指定時のクオーテーション忘れ: getElementById("demo") とすべきところを、クオーテーションを忘れて記述してしまうミス。

4. コード例：<p>要素のコンテンツを変更する

以下の例では、IDが "p1" である <p> 要素のコンテンツを書き換えています。

<html>
<body>

<p id="p1">Hello World!</p>

<script>
// IDが"p1"のエレメントを取得し、中身を書き換える
document.getElementById("p1").innerHTML = "新しいテキスト！";
</script>

</body>
</html>

4.1 コードの解説

上記のHTMLドキュメントには、 id="p1" を持つ <p> 要素が含まれています。
HTML DOMを使用して、 id="p1" の要素を取得します。
JavaScriptがその要素のコンテンツ（innerHTML）を "新しいテキスト！" に変更します。

5. コード例：<h1>要素のコンテンツを変更する

次に、 <h1> 見出し要素の内容を変更する例を見てみましょう。

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">古い見出し</h1>

<script>
const element = document.getElementById("id01");
element.innerHTML = "新しい見出し";
</script>

</body>
</html>

5.1 コードの解説

HTMLドキュメント内に id="id01" の <h1> 要素が存在します。
HTML DOMを介してその要素を取得し、変数 element に代入します。
JavaScriptによって element.innerHTML が "新しい見出し" に更新されます。

6. 属性（アトリビュート）の変更

HTMLの属性値を変更するには、以下の構文を使用します。

構文:document.getElementById(id).attribute = new value

6.1 <img>要素のsrc属性を変更する例

以下のコードは、画像要素のソース（パス）を動的に切り替えます。

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
// src属性を別の画像ファイルに変更する
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>

解説:

id="myImage" を持つ <img> 要素をDOM経由で特定します。
JavaScriptがその要素の src 属性を "smiley.gif" から "landscape.jpg" へと変更します。

7. 動的なHTMLコンテンツ

JavaScriptを用いることで、リアルタイムに変化する動的なHTMLコンテンツを生成できます。
例： Sat Apr 18 2026 00:08:11 GMT+0000 (Coordinated Universal Time)

<!DOCTYPE html>
<html>
<body>

<div id="demo"></div>

<script>
// Date()関数を使用して現在日時を表示する
document.getElementById("demo").innerHTML = "日付 : " + Date();
</script>

</body>
</html>

8. document.write()

JavaScriptの document.write() メソッドを使用すると、HTMLの出力ストリームに直接書き込むことができます。

<!DOCTYPE html>
<html>
<body>

<p>テキストの塊 A</p>

<script>
// HTMLストリームに直接書き込み
document.write(Date());
</script>

<p>テキストの塊 B</p>

</body>
</html>

8.1 【警告】使用上の注意

ドキュメントが完全にロードされた（読み込まれた）後に document.write() を実行してはいけません。既存のドキュメント全体が上書きされて消えてしまいます。 動的な更新には、前述の innerHTML を使用するのがモダンな開発の標準です。