JavaScript HTML DOM - 改变 HTML_JSHTMLDOM


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"


Copyright © 2017 CSS5.NET教程.CSS5 内容仅用于学习和测试参考。 css5.net All Rights Reserved