JavaScript HTML DOM 改变 HTML

最新推荐文章于 2024-10-02 05:39:15 发布

梁辰兴

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量411

点赞数 1

分类专栏： JavaScript 编程基础文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_62617719/article/details/129193386

版权

JavaScript 编程基础专栏收录该内容

75 篇文章 73 订阅

订阅专栏

JavaScript可以通过HTMLDOM接口改变HTML元素的内容、输出流和属性。例如，使用innerHTML属性可以修改元素的文本内容，document.write()用于动态生成HTML，而改变HTML属性则涉及设置元素的特定属性值，如修改<img>标签的src属性。

摘要由CSDN通过智能技术生成

文章目录

JavaScript HTML DOM 改变 HTML

JavaScript HTML DOM 改变 HTML

在这里插入图片描述

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

改变 HTML 输出流

JavaScript 能够创建动态的 HTML 内容：

今天的日期是： Thu Apr 13 2017 16:05:28 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="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=新属性值

本例改变了元素的 src 属性：

<!DOCTYPE html>
<html>
  <body>
    <img id="image" src="smiley.gif">
    <script>
      document.getElementById("image").src="landscape.jpg";
    </script>
  </body>
</html>