JavaScript HTML DOM - 改变 HTML - JavaScript 基础教程

HTML DOM 允许 JavaScript 改变 HTML 元素的内容

改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容

今天的日期是：

HTML DOM 的 document.write() 方法可用于直接向 HTML 输出流写内容

<!DOCTYPE html>
<meta charset="utf-8" />
<script>
document.write(Date());
</script>

运行范例 »

绝对不要在文档加载完成之后使用 document.write()，这会覆盖该文档

改变 HTML 内容

修改 HTML 内容的最简单的方法时使用 HTML 元素的 innerHTML 属性

如果想要改变 HTML 元素的内容，可以使用这个语法

document.getElementById( id ).innerHTML= "新的 HTML";

下面的范例改变了 <p> 元素的内容

<!DOCTYPE html>
<meta charset="utf-8" />
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

运行范例 »

下面的范例改变了 <h1> 元素的内容

<!DOCTYPE html>
<meta charset="utf-8" />
<h1 id="header">Old Header</h1>
<script> 
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>

运行范例 »

上面的范例中

HTML 文档含有 id="header" 的 <h1> 元素
然后使用 HTML DOM 来获得 id="header" 的元素
最后使用 JavaScript 更改此元素的内容 (innerHTML)

改变 HTML 属性

如果想要更改 HTML 元素的属性，可以使用这个语法

document.getElementById( id).attribute= "新属性值"

下面的范例改变了 <img> 元素的 src 属性

<!DOCTYPE html>
<meta charset="utf-8" />
<img id="image" src="smiley.gif">
<script>
document.getElementById("image").src="/static/i/img1.jpg";
</script>

运行范例 »

上面的范例中

HTML 文档含有 id="image" 的 <img> 元素
使用 HTML DOM 来获得 id="image" 的元素
JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "img1.jpg"）