JavaScriptのHTML DOMは、HTMLコンテンツを変更します

HTML DOMは、JavaScriptがHTML要素の内容を変更することができます。


HTML出力ストリームを変更

JavaScriptは、動的HTMLコンテンツを作成することができます。

今日の日付は、次のとおりです。Thu Oct 21 2021 14:30:50 GMT+0800 (中国标准时间)

JavaScriptでは、のdocument.write()がそのまま出力ストリームにHTMLコンテンツを記述するために使用することができます。

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</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>

»をお試しください

この例では、<H1>要素の内容を変更します。

<!DOCTYPE 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>

»をお試しください

説明する例:

  • <IMG>要素のid = "画像"が含まれている上記のHTMLドキュメント
  • 私たちは、ID = "画像"要素を取得するためにHTML DOMを使用します
  • JavaScriptは(「landscape.jpg "に" smiley.gif ")この要素のプロパティを変更します