首页 参考手册 笔记

JavaScript 教程
JavaScript 教程 JavaScript 用法 JavaScript 语句 JavaScript 变量 JavaScript 条件语句 JavaScript for 循环 JavaScript 错误 javascript 输出 JavaScript 语法 JavaScript 注释 JavaScript 数据类型 JavaScript 对象 JavaScript 函数 JavaScript 作用域 JavaScript 事件 JavaScript 字符串 JavaScript 运算符 JavaScript 比较 和 逻辑运算符 JavaScript switch 语句 JavaScript while 循环 JavaScript Break 和 Continue 语句 JavaScript typeof JavaScript 类型转换 JavaScript 正则表达式 JavaScript 调试 JavaScript 变量提升 JavaScript 严格模式 JavaScript 使用误区 JavaScript 表单 JavaScript 表单验证 JavaScript 验证 API JavaScript 保留关键字 JavaScript JSON JavaScript void JavaScript 代码规范

JavaScript HTML DOM

DOM 事件 DOM 简介 DOM HTML DOM CSS DOM EventListener DOM 元素

JavaScript 库

JavaScript 库 JavaScript 测试 jQuery JavaScript 测试 Prototype

JavaScript 浏览器BOM

JavaScript 弹窗 JavaScript Window JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript Navigator JavaScript 计时事件 JavaScript Cookie

JavaScript 高级教程

JavaScript Array(数组) JavaScript 对象 JavaScript Number 对象 JavaScript String JavaScript Date(日期) JavaScript Boolean（布尔） JavaScript Math（算数） JavaScript RegExp 对象

JavaScript 函数

JavaScript 闭包 JavaScript 函数定义 JavaScript 函数参数 JavaScript 函数调用

JavaScript 实例

JavaScript 实例 JavaScript 对象 实例 JavaScript 浏览器 对象 实例 JavaScript HTML DOM 实例 JavaScript 总结

JavaScript 参考手册

JavaScript 对象 JavaScript Array 对象 JavaScript Boolean 对象 JavaScript Date 对象 JavaScript Math 对象 JavaScript Number 对象 JavaScript String 对象 JavaScript RegExp 对象 JavaScript 全局属性函数 JavaScript 运算符

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>
尝试一下 »
lamp 绝对不要在文档加载完成之后使用 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=新属性值

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

实例

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

实例讲解：

  • 上面的 HTML 文档含有 id="image" 的 <img> 元素
  • 我们使用 HTML DOM 来获得 id="image" 的元素
  • JavaScript 更改此元素的属性（把 "smiley.gif" 改为 "landscape.jpg"）