课程表

JS 教程

JS HTML DOM

JS 对象

JS Window

JS 库

ECMAScript 基础

ECMAScript 运算符

ECMAScript 语句

ECMAScript 函数

ECMAScript 对象

ECMAScript 继承

E4X 教程

JS 实例和总结

JS 参考手册

工具箱
速查手册

DOM HTML

当前位置：免费教程 » JS/JS库/框架 » JavaScript

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

改变 HTML 输出流

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

今天的日期是： Sat Mar 15 2025 14:30:27 GMT+0000 (Coordinated Universal Time)

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

实例

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <script>
  6. document.write(Date());
  7. </script>
  8.  
  9. </body>
  10. </html>

亲自试一试

提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

改变 HTML 内容

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

如需改变 HTML 元素的内容，请使用这个语法：

  1. document.getElementById(id).innerHTML=new HTML

实例

本例改变了 <p> 元素的内容：

  1. <html>
  2. <body>
  3.  
  4. <p id="p1">Hello World!</p>
  5.  
  6. <script>
  7. document.getElementById("p1").innerHTML="New text!";
  8. </script>
  9.  
  10. </body>
  11. </html>

亲自试一试

实例

本例改变了 <h1> 元素的内容：

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <h1 id="header">Old Header</h1>
  6.  
  7. <script>
  8. var element=document.getElementById("header");
  9. element.innerHTML="New Header";
  10. </script>
  11.  
  12. </body>
  13. </html>

亲自试一试

例子解释：

  • 上面的 HTML 文档含有 id="header" 的 <h1> 元素
  • 我们使用 HTML DOM 来获得 id="header" 的元素
  • JavaScript 更改此元素的内容 (innerHTML)

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

  1. document.getElementById(id).attribute=new value

实例

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

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4.  
  5. <img id="image" src="smiley.gif">
  6.  
  7. <script>
  8. document.getElementById("image").src="landscape.jpg";
  9. </script>
  10.  
  11. </body>
  12. </html>

亲自试一试

例子解释：

  • 上面的 HTML 文档含有 id="image" 的 <img> 元素
  • 我们使用 HTML DOM 来获得 id="image" 的元素
  • JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）
转载本站内容时，请务必注明来自W3xue，违者必究。
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
皖ICP备17017327号-2　皖公网安备34020702000426号