javascript html dom - 改变 html
html dom 允许 javascript 改变 html 元素的内容。
改变 html 输出流
javascript 能够创建动态的 html 内容：
今天的日期是： document.write(date());
在 javascript 中，document.write() 可用于直接向 html 输出流写内容。
实例
<!doctype html>
<html>
<body>
<script>
document.write(date());
</script>
</body>
</html>
<html>
<body>
<script>
document.write(date());
</script>
</body>
</html>
 |
绝对不要在文档(dom)加载完成之后使用 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>
<body>
<p id="p1">hello world!</p>
<script>
document.getelementbyid("p1").innerhtml="新文本!";
</script>
</body>
</html>
本例改变了 <h1> 元素的内容：
实例
<!doctype html>
<html>
<body>
<h1 id="header">old header</h1>
<script>
var element=document.getelementbyid("header");
element.innerhtml="新标题";
</script>
</body>
</html>
<html>
<body>
<h1 id="header">old header</h1>
<script>
var element=document.getelementbyid("header");
element.innerhtml="新标题";
</script>
</body>
</html>
实例讲解：
- 上面的 html 文档含有 id="header" 的 <h1> 元素
- 我们使用 html dom 来获得 id="header" 的元素
- javascript 更改此元素的内容 (innerhtml)
改变 html 属性
如需改变 html 元素的属性，请使用这个语法：
document.getelementbyid(id).attribute=新属性值
本例改变了 <img> 元素的 src 属性：
实例
<!doctype html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getelementbyid("image").src="landscape.jpg";
</script>
</body>
</html>
<html>
<body>
<img id="image" src="smiley.gif">
<script>
document.getelementbyid("image").src="landscape.jpg";
</script>
</body>
</html>
实例讲解：
- 上面的 html 文档含有 id="image" 的 <img> 元素
- 我们使用 html dom 来获得 id="image" 的元素
- javascript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）
【说明】：本文章由站长整理发布，文章内容不代表本站观点，如文中有侵权行为，请与本站客服联系(QQ:254677821)！