JavaScript HTML DOM - 改变 HTML
HTML DOM 允许 JavaScript 更改 HTML 元素的内容。
一、改变 HTML 输出流
JavaScript 能创建动态 HTML 内容：
现在的日期是： Wed Aug 29 2018 14:53:47 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=最新的 HTML
本例更改了 <p>元素的内容：
示例代码
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="我的新文本!";
</script>
</body>
</html>
本例更改了 <h1> 元素的内容：
示例代码
<!DOCTYPE html>
<html>
<body>
<h1 id="he1">Old He1</h1>
<script>
var element=document.getElementById("he1");
element.innerHTML="这是我新标题";
</script>
</body>
</html>
演示一下 ?示例代码讲解：
上面的 HTML 文档包括 id="he1" 的 <h1> 元素
我们使用 HTML DOM 来取得 id="he1" 元素
JavaScript 改正这个元素的内容 (innerHTML)
三、更改 HTML 属性的值
如需更改 HTML 元素属性，使用下面这个语法：
document.getElementById(id).attribute=属性值 value
本例更改了 <img> 元素的 src 属性值：
示例代码
<!DOCTYPE html>
<html>
<body>
<img id="tuimg" src="smiley.gif">
<script>
document.getElementById("tuimg").src="tuimg.jpg";
</script>
</body>
</html>
示例代码讲解：
上面的 HTML 文档包括 id="tuimg" 的 <img> 元素
我们使用 HTML DOM 来点击获得 id="tuimg" 的元素
JavaScript 把元素中的 src 属性从 "smiley.gif" 修改为 "tuimg.jpg"