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

改变 HTML 输出流

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

今天的日期是：
Thu Feb 25 2016 19:25:10 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=new HTML

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

实例

<html>
<body>

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

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

</body>
</html>

尝试一下 »

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

实例

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="New Header";
</script>

</body>
</html>

尝试一下 »

实例讲解：

    • 上面的 HTML 文档含有 id="header" 的 <h1> 元素

    • 我们使用 HTML DOM 来获得 id="header" 的元素

    • JavaScript 更改此元素的内容 (innerHTML)

改变 HTML 属性

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

document.getElementById(id).attribute=new value

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

HTML DOM 改变 HTML 内容的更多相关文章

  1. JavaScript HTML DOM - 改变 HTML

    JavaScript HTML DOM - 改变 HTML HTML DOM 允许 JavaScript 改变 HTML 元素的内容. 改变 HTML 输出流 JavaScript 能够创建动态的 H ...

  2. 使用ajax实现无刷新改变页面内容

    如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...

  3. Java文件编码自动转换工具类（只改变编码，不会改变文件内容）

    本篇随笔主要介绍了一个用java语言写的将一个文件编码转换为另一个编码并不改变文件内容的工具类: 通过读取源文件内容,用URLEncoding重新编码解码的方式实现. public class Cha ...

  4. 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. JavaScript HTML DOM - 改变CSS

    JavaScript HTML DOM - 改变CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法 ...

  6. 【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】

    1.onclick事件 <button type="button" onclick="alert('Welcome!')">点击这里</but ...

  7. js通过DOM改变html和css

    1.改变html输出流,通过document.write() 直接向 HTML 输出流写内容 <body> <p>段落</p> <script> doc ...

  8. 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL (转)

    在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大 ...

  9. js innerHTML 改变div内容的方法

    永远不知道你可以改变的内容,一个HTML元素?也许你要取代的文字段落中,以反映什么访客选定刚刚从下拉框中.通过操纵一个元素的innerHtml您可以变更您的文本和HTML多达你喜欢.改变文字inner ...

随机推荐

  1. Centos：如何查找安装的jdk的目录

    使用$JAVA_HOME的话能定位JDK的安装路径的前提是配置了环境变量$JAVA_HOME,否则如下所示,根本定位不到JDK的安装路径. 正确的方式是通过 which java: [tt@vddd ...

  2. spring boot 系列之四：spring boot 整合JPA

    上一篇我们讲了spring boot 整合JdbcTemplate来进行数据的持久化, 这篇我们来说下怎么通过spring boot 整合JPA来实现数据的持久化. 一.代码实现 修改pom,引入依赖 ...

  3. python中的多线程

    一个程序可以理解为一个进程,这个进程有其代号,可以依据这个代号将其杀死. 一个进程肯定有且只有一个主线程,他可以有很多子线程. 运行一个任务如果可以有许多子线程同时去做,当然会提高效率. 但是,在py ...

  4. JS查找字符串中出现次数最多的字符

    本文给大家带来两种js中查找字符串中出现次数最多的字符,在这两种方法中小编推荐使用第二种,对js查找字符串出现次数的相关知识感兴趣的朋友一起看看吧   在一个字符串中,如 'zhaochucichuz ...

  5. Microsoft CRM-QueryExpression 成员

      名称 ColumnSet 获取或设置要包含的列. Criteria 获取或设置过滤查询结果的复杂条件和逻辑过滤器表达式. Distinct 获取或设置查询的结果是否包含重复的实体实例. Entit ...

  6. Java基础小记

    一.数据类型转换 1.引用数据类型 包装类型:Byte.Short.Long.Integer.Character.Float.Double.Boolean 2.基本类型与包装类转换 Java里有8种包 ...

  7. libevent源码阅读笔记（一）：libevent对epoll的封装

    title: libevent源码阅读笔记(一):libevent对epoll的封装 最近开始阅读网络库libevent的源码,阅读源码之前,大致看了张亮写的几篇博文(libevent源码深度剖析 h ...

  8. 【django之modelform】

    一.什么是modelform ModelForm顾名思义就Form和Django的Model数据库模型结合体,可以简单.方便得对数据库进行增加.编辑操作和验证标签的生成: 举例说明: 比如我们的数据库 ...

  9. 做了两年多salesforce平台开发，转Java的经历

    2015年毕业,转眼已经三年多了.三年对于现在的我,真的很快,一开始对软件开发的执着一直没有变.我是一个很普通很普通长沙的一个专科毕业.刚进大学,对于软件开发真的是小白,仅仅只是存在对于游戏,和桌面软 ...

  10. [Cqoi2010]扑克牌

    Description 你有n种牌,第i种牌的数目为ci.另外有一种特殊的 牌:joker,它的数目是m.你可以用每种牌各一张来组成一套牌,也可以用一张joker和除了某一种牌以外的其他牌各一张组成1 ...