JavaScript HTMLDOM-HTMLの変更
HTML DOMを使用すると、JavaScriptでHTML要素のコンテンツを変更できます。
HTMLコンテンツの変更
HTML要素のコンテンツを変更する最も簡単な方法は、innerHTMLプロパティを使用することです。
HTML要素のコンテンツを変更するには、次の構文を使用します。
document.getElementById(id).innerHTML = new HTML
この例では、<p>要素のコンテンツを変更します。
例
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
説明された例：
- 上記のHTMLドキュメントには、次の
<p>要素が含まれていますid="p1" - HTML DOMを使用して、次の要素を取得します
id="p1" - JavaScriptは、
innerHTMLその要素のコンテンツ（）を「新しいテキスト」に変更します。
この例では、<h1>要素のコンテンツを変更します。
例
<!DOCTYPE html>
<html>
<body>
<h1 id="id01">Old Heading</h1>
<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>
</body>
</html>
説明された例：
- 上記のHTMLドキュメントには、次の
<h1>要素が含まれていますid="id01" - HTML DOMを使用して、次の要素を取得します
id="id01" - JavaScriptは、
innerHTMLその要素のコンテンツ（）を「新しい見出し」に変更します
属性の値の変更
HTML属性の値を変更するには、次の構文を使用します。
document.getElementById(id).attribute = new value
この例では、<img>要素のsrc属性の値を変更します。
例
<!DOCTYPE html>
<html>
<body>
<img id="myImage" src="smiley.gif">
<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>
</body>
</html>
説明された例：
- 上記のHTMLドキュメントには、次の
<img>要素が含まれていますid="myImage" - HTML DOMを使用して、次の要素を取得します
id="myImage" - JavaScriptは
src、その要素の属性を「smiley.gif」から「landscape.jpg」に変更します
ダイナミックHTMLコンテンツ
JavaScriptはダイナミックHTMLコンテンツを作成できます。
日付：2022年1月29日土曜日22:08:50 GMT + 0000（協定世界時）
例
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("demo").innerHTML = "Date : " + Date();
</script>
</body>
</html>
document.write（）
JavaScriptではdocument.write()、HTML出力ストリームに直接書き込むために使用できます。
例
<!DOCTYPE html>
<html>
<body>
<p>Bla bla bla</p>
<script>
document.write(Date());
</script>
<p>Bla bla bla</p>
</body>
</html>
document.write()ドキュメントがロードされた後は絶対に使用しないでください。ドキュメントを上書きします。