HTML DOM 允許Javascript改變HTML元素的內容。
改變 HTML 輸出流
JavaScript 能夠創建動態 HTML 內容：
Tue May 26 2020 09:07:47 GMT+0800 (中國標準時間)
在 JavaScript中，document.write()可用於直接寫入HTML輸出流中：
<body>
<script>
document.write(Date());
</script>
</body>
千萬不要在文檔加載後使用document.write()。這麼做會覆蓋文檔。
改變HTML內容
修改HTML文檔內容最簡單的方法是，使用innerHTML屬性。
如需要修改HTML元素的內容，請使用此語法 ：
document.getElementById(id).InnerHTML = new text
本例修改了p元素的內容：
例子：
<body>
<h2>JavaScript 可以更改 HTML</h2>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "hello 你是不是傻！"
</script>
</body>
例子解釋：
- 上面的HTML文檔包含id="p1"的p元素
- 我們使用HTML DOM來獲取id="p1"的這個元素
- JavaScript把該元素的內容(innerHTML)更改爲”hello 你是不是傻!“
本例修改了h1元素的內容：
實例：
<body>
<h2 id="id02">舊標題</h2>
<script>
var element = document.getElementById("id02");
element.innerHTML = "新標題";
</script>
<p>JavaScript 將“舊標題”更改爲“新標題”。</p>
</body>
例子解釋：
- 上面的HTML含有id="header"的一個h1元素
- 我們使用了HTML DOM來獲取id=”header“的元素
- JavaScript更改此元素的內容(innerHTML)
改變屬性的值
語法格式：
document.getElementById(id),attribute = new value
本例修改了img元素的src屬性的值：
例子：
<body>
<img id="image" src="img/girl8.jpg">
<script>
document.getElementById("image").src = "img/s6.png";
</script>
<p>原始圖像是<b> irl8.jpg</b>,但腳本將其更改爲<b>s6.png</b></p>
</body>
例子解釋：
- 上面的HTML文檔含有一個id="myImage"的img元素
- 我們使用HTML DOM 來獲取id="myImage"的元素
- JavaScript把此元素的src屬性從"girl8.jpg"更改爲"s6.png"