JavaScriptのHTML DOMは、HTMLコンテンツを変更します
HTML DOMは、JavaScriptがHTML要素の内容を変更することができます。
HTML出力ストリームを変更
JavaScriptは、動的HTMLコンテンツを作成することができます。
今日の日付は、次のとおりです。Thu Oct 21 2021 14:30:50 GMT+0800 (中国标准时间)
JavaScriptでは、のdocument.write()がそのまま出力ストリームにHTMLコンテンツを記述するために使用することができます。
ドキュメントの読み込みが完了した後にdocument.writeを使用しないでください()。 これは、文書を上書きします。 |
HTMLコンテンツを変更します
innerHTMLプロパティにHTMLコンテンツを変更する最も簡単な方法を使用。
HTML要素の内容を変更するには、次の構文を使用します。
document.getElementById(id).innerHTML=新的 HTML
この例では、<p>要素の内容を変更します。
例
<HTML>
<ボディ>
<PのID = "P1"> Hello Worldの!</ P>
<スクリプト>
document.getElementById( "P1")innerHTMLの= "新しいテキスト!";
</スクリプト>
</ BODY>
</ HTML>
<ボディ>
<PのID = "P1"> Hello Worldの!</ P>
<スクリプト>
document.getElementById( "P1")innerHTMLの= "新しいテキスト!";
</スクリプト>
</ BODY>
</ HTML>
»をお試しください
この例では、<H1>要素の内容を変更します。
例
<!DOCTYPE html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
<html>
<body>
<h1 id="header">Old Header</h1>
<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>
</body>
</html>
»をお試しください
説明する例:
- <H1>要素のid = "ヘッダー"が含まれている上記のHTMLドキュメント
- 私たちは、ID = "header"の要素を取得するためにHTML DOMを使用します
- この要素の内容にはJavaScript変更(innerHTMLプロパティ)
HTML属性を変更します
HTML要素のプロパティを変更するには、次の構文を使用します。
document.getElementById(id).attribute=新属性值
この例では、src属性の<img>要素を変更します。
例
<!DOCTYPE html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
</body>
</html>
»をお試しください
説明する例:
- <IMG>要素のid = "画像"が含まれている上記のHTMLドキュメント
- 私たちは、ID = "画像"要素を取得するためにHTML DOMを使用します
- JavaScriptは(「landscape.jpg "に" smiley.gif ")この要素のプロパティを変更します