JavaScript HTML DOM - HTML を変更する

HTML DOMはJavaScriptがHTML要素の内容を変更できるようにします。

HTML出力ストリームを変更する

JavaScriptは動的なHTML内容を作成できます：

JavaScriptでは、document.write() 直接HTML出力ストリームに書き込むことができます：

例

<!DOCTYPE html>
<html>
<body>
<script>
document.write(Date());
</script>
</body>
</html>

自分で試してみる

ドキュメントが読み込まれた後に絶対に使用しないでください document.write()これにより、ドキュメントが上書きされます。

HTML内容を変更する

HTMLドキュメントの内容を変更する最も簡単な方法は、以下の通りです： innerHTML 属性。

HTML要素の内容を変更するには、この構文を使用してください：

document.getElementById(id).innerHTML = new text

この例では、 <p> 要素の内容：

例

<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello kitty!";
</script>
</body>
</html>

自分で試してみる

例説明：

  • 上のHTMLドキュメントにはid="p1"の<p>要素があります
  • HTML DOMを使用してid="p1"のこの要素を取得しました
  • JavaScriptを使用して、その要素の内容（innerHTML）を"Hello Kitty!"に変更しました

この例では、 <h1> 要素の内容：

例

<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element = document.getElementById("header");
element.innerHTML = "New Header";
</script>
</body>
</html>

自分で試してみる

例説明：

  • 上のHTMLにはid="header"の<h1>要素があります
  • HTML DOMを使用してid="header"の要素を取得しました
  • JavaScript でこの要素の内容（innerHTML）を変更します

属性の値を変更する

HTML 属性の値を変更するには、以下の構文を使用してください：

document.getElementById(id).属性 = 新しい値

この例では、 <img> 要素の src 属性の値：

例

<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>

自分で試してみる

例説明：

  • 上記の HTML ドキュメントには id="myImage" の <img> 要素が含まれています
  • id="myImage" の要素を取得するために HTML DOM を使用しています
  • JavaScript はこの要素の src 属性を "smiley.gif" から "landscape.jpg" に変更します