HTML DOM 改变 HTML 内容
HTML DOM 允许 JavaScript 改变 HTML 元素的内容。
改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容：
今天的日期是：
Thu Feb 25 2016 19:25:10 GMT+0800
在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。
 |
绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。 |
|---|
改变 HTML 内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
本例改变了 <p>元素的内容：
实例
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
</body>
</html>
本例改变了 <h1> 元素的内容：
实例
<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 元素的属性，请使用这个语法：
本例改变了 <img> 元素的 src 属性：
实例
<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 内容的更多相关文章
- JavaScript HTML DOM - 改变 HTML
JavaScript HTML DOM - 改变 HTML HTML DOM 允许 JavaScript 改变 HTML 元素的内容. 改变 HTML 输出流 JavaScript 能够创建动态的 H ...
- 使用ajax实现无刷新改变页面内容
如何使用ajax实现无刷新改变页面内容(也就是ajax异步请求刷新页面),下面通过一个小demo说明一下,前端页面代码如下所示 1 <%@ Page Language="C#" ...
- Java文件编码自动转换工具类（只改变编码，不会改变文件内容）
本篇随笔主要介绍了一个用java语言写的将一个文件编码转换为另一个编码并不改变文件内容的工具类: 通过读取源文件内容,用URLEncoding重新编码解码的方式实现. public class Cha ...
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- JavaScript HTML DOM - 改变CSS
JavaScript HTML DOM - 改变CSS HTML DOM 允许 JavaScript 改变 HTML 元素的样式. 改变 HTML 样式 如需改变 HTML 元素的样式,请使用这个语法 ...
- 【onclick事件】【改变 HTML 内容innerHTML】【图片替换】【改变标签的css】【判断输入是否是数字】
1.onclick事件 <button type="button" onclick="alert('Welcome!')">点击这里</but ...
- js通过DOM改变html和css
1.改变html输出流,通过document.write() 直接向 HTML 输出流写内容 <body> <p>段落</p> <script> doc ...
- 使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL (转)
在访问现在很火的google plus时,细心的用户也许会发现页面之间的点击是通过ajax异步请求的,同时页面的URL发生了了改变.并且能够很好的支持浏览器的前进和后退.不禁让人想问,是什么有这么强大 ...
- js innerHTML 改变div内容的方法
永远不知道你可以改变的内容,一个HTML元素?也许你要取代的文字段落中,以反映什么访客选定刚刚从下拉框中.通过操纵一个元素的innerHtml您可以变更您的文本和HTML多达你喜欢.改变文字inner ...
随机推荐
- python/MySQL（索引、执行计划、BDA、分页）
---恢复内容开始--- python/MySQL(索引.执行计划.BDA.分页) MySQL索引: 所谓索引的就是具有(约束和加速查找的一种方式) 创建索引的缺点是对数据进行(修改.更新.删除) ...
- mysql安装及常见问题
下载了MySQL的压缩包,开始配置的时候遇到一大堆问题,下面记录下,也希望对遇到同样问题的你有帮助 开始将压缩包解压到指定文件夹,然后建立一个txt文件命名为my.ini,写入下面的内容 [mysql ...
- mysql sql语句执行时是否使用索引检查方法
在日常开发中,使用到的数据表经常都会有索引,这些索引可能是开发人员/DBA建表时创建的,也可能是在使用过程中新增的.合理的使用索引,可以加快数据库查询速度.然而,在实际开发工作中,会出现有些sql语句 ...
- angularjs bind与model配合双向绑定 表达式方法输出
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- [LeetCode] Longest Uncommon Subsequence II 最长非共同子序列之二
Given a list of strings, you need to find the longest uncommon subsequence among them. The longest u ...
- Python数据抓取_BeautifulSoup模块的使用
在数据抓取的过程中,我们往往都需要对数据进行处理 本篇文章我们主要来介绍python的HTML和XML的分析库 BeautifulSoup 的官方文档网站如下 https://www.crummy.c ...
- 【Swift】ios开发中巧用 description 打印对象时，打印对象的属性
ios开发中我们打印对象的时候,会直接输出对象地址,这样不方便我们开发.我们可以 巧用 description 打印对象时,输出对象的属性 在oc中直接重写即可.swift中需要遵守Printable ...
- Scrapy命令行基本用法
1.创建一个新项目: scrapy startproject myproject 2.在新项目中创建一个新的spider文件: scrapy genspider mydomain mydomain.c ...
- [自用]数论和组合计数类数学相关（定理&证明&板子）
0 写在前面 本文受 NaVi_Awson 的启发,甚至一些地方直接引用,在此说明. 1 数论 1.0 gcd 1.0.0 gcd $gcd(a,b) = gcd(b,a\;mod\;b)$ 证明:设 ...
- [HNOI2001]矩阵乘积
题目描述 输入输出格式 输入格式: 第1行为:x y (第1行为两个正整数:x,y分别表示输出结果所在的行和列) 第2行为:m n o p(第2行给出的正整数表明A为m×n矩阵,B为n×o矩阵,C为o ...