JavaScript HTML DOM - 改变 HTML


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


改变 HTML 输出流

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

今天的日期是: Mon Jun 01 2015 18:23:35 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")

JavaScript HTML DOM - 改变 HTML的更多相关文章

  1. JavaScript HTML DOM - 改变CSS

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

  2. JavaScript HTML DOM - 改变 CSS

    HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法: document.getElementById(id ...

  3. JavaScript HTML Dom改变HTML

    本人为小白,首次写博客  有不正确的地方望多多指点与见谅!! 一,改变HTML的内容 语法: document.getElementById(id).innerHTML=new HTML: 具体用法: ...

  4. javascript HTML DOM 简单介绍

    JavaScript HTML DOM通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素.HTML DOM (文档对象模型)当网页被加载时,浏览器会创建页面的文档对象模型( ...

  5. javascript --- javascript与DOM

    javascript与DOM: 我们来个例子,一个HTML里包含一段文本和一个无序的列表. <p id="intro">My first paragraph...< ...

  6. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  7. JavaScript与DOM的关系

    JavaScript与浏览器的工作 1.浏览器获取并加载你的页面,从上至下解析它的内容. 遇到JavaScript时,浏览器会解析代码,检查它的正确性,然后执行代码. 浏览器还会建立一个HTML页面的 ...

  8. JavaScript学习笔记(2)——JavaScript和DOM的关系

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...

  9. JavaScript HTML DOM 元素(节点)

    JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素 创建新的 HTML 元素 如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...

随机推荐

  1. android gradle 多渠道打包

    buildscript { repositories { mavenCentral() } dependencies { classpath 'com.android.tools.build:grad ...

  2. wcf 请考虑增加操作超时

    发送到 net.tcp://192.168.1.18:8732/CallbackService 的请求操作在配置的超时(00:00:59.9879994)内未收到回复. 分配给此操作的时间可能已经是更 ...

  3. RHCS集群理论暨最佳实践

    RHCS集群理论暨 最佳实践 什么是集群?     集群是一组(>2)相互独立的,通过高速网络互联的计算机组成的集合.群集一般可以分为科学集群,负载均衡集群,高可用性集群三大类.     科学集 ...

  4. Apache 整合 Tomcat (首先Apache 发布的是PHP项目,占用端口80,tomcat 发布的是Java 项目,占用端口8080)

    情况简介: Apache 整合 Tomcat (首先Apache 发布的是PHP项目,占用端口80,tomcat 发布的是Java 项目,占用端口8080),而现在是虚拟出来两个域名(希望这两个域名都 ...

  5. 6N137的使用

    (1)引脚图 (2)功能表 (3)内部结构图 信号从2.3脚输入,反向偏置的光敏二极管受光照后导通,经过电流电压转换,输入到与门一端,与门另一端为使能端.由于输入信号为集电极开路,需要加上拉电阻.当使 ...

  6. 4种字符串匹配算法:BS朴素 Rabin-karp(上)

    字符串的匹配的算法一直都是比较基础的算法,我们本科数据结构就学过了严蔚敏的KMP算法.KMP算法应该是最高效的一种算法,但是确实稍微有点难理解.所以打算,开这个博客,一步步的介绍4种匹配的算法.也是& ...

  7. 检测WIfi是否打开

    引入SystemConfiguration库并添加头文件: #import <SystemConfiguration/SystemConfiguration.h> 代码如下:     NS ...

  8. 从m个数中取top n

    将题目具体一点,例如,从100个数中取出从大到小排前10的数 方法1:使用快速排序 因为快速排序一趟下来,小于K的数都在K的前面,大于K的数都在K的后面 如果,小于K的数有35个,大于K的数有64个 ...

  9. 一句话菜刀获取ip详细信息

    <?php $ip="你要查的ip"; $url="http://ip.taobao.com/service/getIpInfo.php?ip=".$ip ...

  10. SQL string类型的数据按int类型排序 分类: SQL Server 2014-12-08 16:56 393人阅读 评论(0) 收藏

    说明: 我在做wms进销存软件时,发现一个问题:一张入库单(T_OutIn_BoxTop),入库扫描时要分成多箱,箱号(BoxTop_No)可以是数字也可以是字符串,所以箱号只能是字符串类型的,问题来 ...