阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript DOM 改变 HTML 内容

      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>
      

      绝对不要在文档 (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>
      

      本例改变了 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>
      

      实例讲解:

      • 上面的 HTML 文档含有 id=“image” 的 元素
      • 我们使用 HTML DOM 来获得 id=“image” 的元素
      • JavaScript 更改此元素的属性(把 “smiley.gif” 改为 “landscape.jpg”)
      目录
      目录