修改 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 创建与修改的更多相关文章

  1. JavaEE XML DOM创建

    DOM创建XML @author ixenos 1.思路: 先封装构建一颗DOM树,然后将DOM树转换成XML文件 2.三种写DOM树到XML文件的方式: 1)使用DOM(或DOM4J.JDOM) 2 ...

  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. ...

  3. <<< Oracle序列的创建、修改、删除基本操作

    序列是一个命名的顺序编号生成器,可以被多个用户共享,类似sqlserver中的identity create sequence 序列名; //直接创建一个序列 CREATE SEQUENCE 序列名; ...

  4. ABAP 生产订单的创建与修改函数

    ABAP 生产订单的创建与修改函数转自http://www.cnblogs.com/aBaoRong/archive/2012/04/11/2441946.html   如果生产订单过多,可以批量创建 ...

  5. 用 C# 轻松读取、改变文件的创建、修改、访问时间

    创建时间是文件存入到电脑中的时间,而修改时间则是改变起内容的最后时间 // 读取文件的创建.修改.访问时间FileInfo fi = new FileInfo("C://test.txt&q ...

  6. oracle 11g 如何创建、修改、删除list-list组合分区

    Oracle11g在分区方面做了很大的提高,不但新增了4种复合分区类型,还增加了虚拟列分区.系统分区.INTERVAL分区等功能. 9i开始,Oracle就包括了2种复合分区,RANGE-HASH和R ...

  7. (转) mysql的连接,创建账号,修改密码

    原文:http://blog.chinaunix.net/uid-20749043-id-1878306.html  mysql的连接,创建账号,修改密码 2008-10-13 15:31:29 分类 ...

  8. MySQL:创建、修改和删除表

    其实对很多人来说对于SQL语句已经忘了很多,或者说是不懂很多,因为有数据库图形操作软件,方便了大家,但是我们不能忘记最根本的东西,特别是一些细节上的东西,可能你用惯了Hibernate,不用写SQL语 ...

  9. SQLite 入门教程(二)创建、修改、删除表 (转)

    转于 SQLite 入门教程(二)创建.修改.删除表 一.数据库定义语言 DDL 在关系型数据库中,数据库中的表 Table.视图 View.索引 Index.关系 Relationship 和触发器 ...

随机推荐

  1. src 和 href 的区别

    因为理解不深,到写外部加载Javascript文件或者css文件的时候总是需要去找个例子,这样可不好.现在总结下 href 属性规定被链接文档的位置(URL). href是hyperrefresh的缩 ...

  2. CSS自学笔记(4):CSS样式表的使用

    当浏览器读到一个样式表时,浏览器会根据这个样式表来格式化html文档,从而表现出各式各样的网页. 想要浏览器读到样式表,有三种方法: 1.外部样式表 外部样式表可以理解为.CSS文件.当多个页面使用同 ...

  3. Win7下qt5.3.1+opencv2.4.9编译环境的搭建(好多 Opencv2.4.9源码分析的博客)

      到官网下载qt-opensource-windows-x86-mingw482_opengl-5.3.1.exe文件,执行该文件,选择默认安装即可实现QT的安装(安装在C盘的根目录下),该文件封装 ...

  4. Boost.Asio c++ 网络编程翻译(14)

    保持活动 假如,你须要做以下的操作: io_service service; ip::tcp::socket sock(service); char buff[512]; ... read(sock, ...

  5. iOS点滴- ViewController详解

    一.生命周期 当一个视图控制器被创建,并在屏幕上显示的时候. 代码的执行顺序 1. alloc                              创建对象,分配空间 2.init (initW ...

  6. HTML系列(六):划分文档结构

    常见的网页结构布局是酱紫的,真是美美哒^O^: 一.添加基本标题h1~h6(没什么好说的): 二.标题分组hgroup <hgroup>用来将标题和子标题进行分组.如果一篇文章articl ...

  7. oracle 导入txt

    没有Oraclehoume的情况下,执行下环境变量文件 sqlldr userid= DM/DM control = /home/oracle/libc/load.ctl load data infi ...

  8. IOS UITextField &UITextView

    UITextField 限制textField长度 曾经,以为输入框只是输入字符的,但真的认真为一个登陆界面输入框而改了六七次以后,发现好烦人啊,先谢谢测试的不厌其烦,不杀之恩,不想再用IOS的输入框 ...

  9. 前端页面优化:javascript图片延迟加载

    自己写了个简单的图片延迟加载小插件. 功能如下: 页面刷新,当前屏幕图片直接加载真实地址,body被卷去的部分和下方未显示的部分的img均加载通用图片如:loding.gif 随着屏幕上下滚动加载相应 ...

  10. javascript小练习—点击将DIV变成红色(通过for循环遍历)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...