码农教程 - 一技在手,衣食无忧! tools

目录

JavaScript HTML DOM-更改HTML

❮ 上一节 下一节 ❯

HTML DOM 允许 JavaScript 更改 HTML 元素的内容。

更改 HTML 内容

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

要更改 HTML 元素的内容，请使用以下语法：

document.getElementById( id).innerHTML = new HTML

此示例更改了<p>元素：

示例

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML = "New text!";
</script>

</body>
</html>
亲自试一试 »

示例解释：

  • 上面的HTML文档包含一个<p>元素与id="p1"
  • 我们使用 HTML DOM 来获取元素id="p1"
  • JavaScript更改内容（innerHTML该元素的）到＃{0}＃

此示例更改了<h1>元素：

示例

<!DOCTYPE html>
<html>
<body>

<h1 id="id01">Old Heading</h1>

<script>
const element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

</body>
</html>
亲自试一试 »

示例解释：

  • 上面的HTML文档包含一个<h1>元素与id="id01"
  • 我们使用 HTML DOM 来获取元素id="id01"
  • JavaScript更改内容（innerHTML该元素的）到＃{0}＃

更改属性的值

要更改 HTML 属性的值，请使用以下语法：

document.getElementById( id). attribute = new value

此示例更改了一个SRC属性的值<img>元素：

示例

<!DOCTYPE html>
<html>
<body>

<img id="myImage" src="smiley.gif">

<script>
document.getElementById("myImage").src = "landscape.jpg";
</script>

</body>
</html>
亲自试一试 »

示例解释：

  • 上面的HTML文档包含一个<img>元素与id="myImage"
  • 我们使用 HTML DOM 来获取元素id="myImage"
  • JavaScript改变了src该元素的属性从＃{0}＃到＃{1}＃

动态 HTML 内容

JavaScript 可以创建动态 HTML 内容：

示例

<!DOCTYPE html>
<html>
<body>

<script>
document.getElementById("demo").innerHTML = "Date : " + Date(); </script>

</body>
</html>
亲自试一试 »

文档.write()

在 JavaScript 中，document.write()可用于直接写入HTML输出流：

示例

<!DOCTYPE html>
<html>
<body>

<p>Bla bla bla</p>

<script>
document.write(Date());
</script>

<p>Bla bla bla</p>

</body>
</html>
亲自试一试 »

切勿使用document.write()文档加载后。它将覆盖文档。

通过练习测试一下

练习:

使用HTML DOM更改图片SRC属性的值。

<img id="image" src="smiley.gif">

<script>
document.getElementById("image") = "pic_mountain.jpg";
</script>

开始练习

❮ 上一节 下一节 ❯