HTML DOM 创建与修改
修改 HTML 元素
修改 HTML DOM 意味着许多不同的方面:
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件(处理程序)
在接下来的章节,我们会深入学习修改 HTML DOM 的常用方法。
建 HTML 内容
改变元素内容的最简答的方法是使用 innerHTML 属性。
下面的例子改变一个 <p> 元素的 HTML 内容:
<!DOCTYPE html>
<html>
<body> <p id="p1">Hello World!</p> <script>
document.getElementById("p1").innerHTML="New text!";
</script> <p>上面的段落被一段脚本改变了。</p> </body>
</html>
改变 HTML 样式
通过 HTML DOM,您能够访问 HTML 元素的样式对象。
下面的例子改变一个段落的 HTML 样式:
<html> <body>
<p id="p2">Hello world!</p> <script>
document.getElementById("p2").style.color="blue";
</script> </body>
</html>
创建新的 HTML 元素
如需向 HTML DOM 添加新元素,您首先必须创建该元素(元素节点),然后把它追加到已有的元素上。
<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div> <script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node); var element=document.getElementById("d1");
element.appendChild(para);
</script>
HTML DOM 创建与修改的更多相关文章
- JavaEE XML DOM创建
DOM创建XML @author ixenos 1.思路: 先封装构建一颗DOM树,然后将DOM树转换成XML文件 2.三种写DOM树到XML文件的方式: 1)使用DOM(或DOM4J.JDOM) 2 ...
- Oracle触发器原理、创建、修改、删除
本篇主要内容如下: 8.1 触发器类型 8.1.1 DML触发器 8.1.2 替代触发器 8.1.3 系统触发器 8.2 创建触发器 8.2.1 触发器触发次序 8.2.2 创建DML触发器 8.2. ...
- <<< Oracle序列的创建、修改、删除基本操作
序列是一个命名的顺序编号生成器,可以被多个用户共享,类似sqlserver中的identity create sequence 序列名; //直接创建一个序列 CREATE SEQUENCE 序列名; ...
- ABAP 生产订单的创建与修改函数
ABAP 生产订单的创建与修改函数转自http://www.cnblogs.com/aBaoRong/archive/2012/04/11/2441946.html 如果生产订单过多,可以批量创建 ...
- 用 C# 轻松读取、改变文件的创建、修改、访问时间
创建时间是文件存入到电脑中的时间,而修改时间则是改变起内容的最后时间 // 读取文件的创建.修改.访问时间FileInfo fi = new FileInfo("C://test.txt&q ...
- oracle 11g 如何创建、修改、删除list-list组合分区
Oracle11g在分区方面做了很大的提高,不但新增了4种复合分区类型,还增加了虚拟列分区.系统分区.INTERVAL分区等功能. 9i开始,Oracle就包括了2种复合分区,RANGE-HASH和R ...
- (转) mysql的连接,创建账号,修改密码
原文:http://blog.chinaunix.net/uid-20749043-id-1878306.html mysql的连接,创建账号,修改密码 2008-10-13 15:31:29 分类 ...
- MySQL:创建、修改和删除表
其实对很多人来说对于SQL语句已经忘了很多,或者说是不懂很多,因为有数据库图形操作软件,方便了大家,但是我们不能忘记最根本的东西,特别是一些细节上的东西,可能你用惯了Hibernate,不用写SQL语 ...
- SQLite 入门教程(二)创建、修改、删除表 (转)
转于 SQLite 入门教程(二)创建.修改.删除表 一.数据库定义语言 DDL 在关系型数据库中,数据库中的表 Table.视图 View.索引 Index.关系 Relationship 和触发器 ...
随机推荐
- CSS自学笔记(5):CSS的样式
CSS中拥有各种各样的样式表,而基本的样式有背景,文本,字体,链接,列表,表格,轮廓. 一.CSS-背景 CSS中允许用纯色背景,也允许用图片来创建复杂的个性背景. p {background-col ...
- 如何彻底卸载sql server 2012
好不容易装上了sql server 2012数据库,可是却不能连接本地的数据库,后来发现缺少一些服务,于是决定重新安装,但是卸载却很麻烦,如果卸载不干净的话,重新安装会出问题,所以下面就总结一些方法: ...
- PHP学习之数据库操作
PHP数据库操作: 一.连接数据库 mysql_connect() 例:$link=mysql_connent("localhost","root"," ...
- [Java 8 Lambda] java.util.stream 简单介绍
包结构例如以下所看到的: 这个包的结构非常easy,类型也不多. BaseStream接口 全部Stream接口类型的父接口,它继承自AutoClosable接口,定义了一些全部Stream都具备的行 ...
- 一步一步学android之布局管理器——RelativeLayout
今天开始学习RelativeLayout(相对布局),相对布局在平时布局的时候用的较多,因为Android适配方面的原因.相对布局可以控制组件摆放的位置(放在任一组件的上下左右等位置),下面来看看类的 ...
- Android 常用开发类库
android.app :提供高层的程序模型.提供基本的运行环境 android.content :包含各种的对设备上的数据进行访问和发布的类 android.database :通过内容 ...
- UVa 10491 Cows and Cars (概率&广义三门问题 )
10491 - Cows and Cars Time limit: 3.000 seconds http://uva.onlinejudge.org/index.php?option=com_onli ...
- android-带进度条的系统通知栏消息
效果图: 主界面只有一个按钮就不上文件了 通知栏显示所用到的布局文件content_view.xml <?xml version="1.0" encoding="u ...
- NAND FLASH
NAND Flash 以Micron公司的MT29F2G08为例介绍NAND Flash原理和使用. 1. 概述 MT29F2G08使用一个高度复用的8-bit总线(I/O[7:0])来数据传输.地址 ...
- 关于Installation error: INSTALL_FAILED_MISSING_SHARED_LIBRARY
google 给的android的例子里,有用到google APIs,新版本的ADT默认只有Android的SDK,如果运行平台与目标平台不一致会报:Installation error: INST ...