HTML DOMは、JavaScriptがHTML要素の内容を変更することができます。
HTML出力ストリームを変更します
JavaScriptは、動的HTMLコンテンツを作成することができます。
日付:日2016年11月6日19時23分35秒GMT + 0800(中国标准时间)
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 HTML
この例では、内容に変更<p>要素を:
例
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New text!";
</script>
</body>
</html>
»それを自分で試してみてください この例では、内容に変更<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文書は含まれてい<h1>を持つ要素id="header"
- 我々は持つ要素を取得するには、HTMLのDOMを使用するid="header"
- JavaScriptは内容に変更(innerHTML)その要素のを
属性の値を変更します
HTML属性の値を変更するには、次の構文を使用します。
document.getElementById(id).attribute=new value
この例では、のsrc属性の値に変更<img>要素を:
例
<!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"