修改 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. mini-httpd源码分析-tdate_parse.h

    ///关联字符串和整数 struct strlong { char* s; long l; }; ///将字符串中的大写字母转换成小写字母 static void pound_case(char* s ...

  2. Cortex-M3学习日志(三)-- 外部中断0

    无论是哪款单片机应该都有对应的中断的功能,中断在嵌入式系统的地位毋庸置疑.LPC1768微处理器包括4个外部中断,分别是EINT0.EINT1.EINT2.EINT3对应的引脚分别是P2.10~P2. ...

  3. 自写的LastPos,寻找字符串里的最后一个字符,RTL里没有提供这个函数——Delphi的String下标是从1开始的

    已经好几次了,没有这个函数还是感觉很不方便,所以自己写了一个: function LastPos(strFind :string; ch: Char): integer; var i, n: inte ...

  4. Genymotion中SD卡目录在Eclipse中查看,以及创建SDCard

    咦?这后面似乎指向一个目录,我就去找/mnt/shell/emulated/0 Wow~好熟悉的目录..不熟悉的同学可以打开android模拟器的File Manger App 里面就是这些目录了,然 ...

  5. java 操作配置文件 .properties

    package com.dms.common; import java.io.File; import java.io.FileInputStream; import java.io.FileNotF ...

  6. 30款基本UX工具 - 用户测试与反馈工具

    日期:2013-9-5  来源:GBin1.com 在上一篇30款基本UX工具 - 思维流程工具 & 原型工具中,我们提到了10款用于头脑风暴和原型创建的工具,用于帮助我们在用户体验上可以做的 ...

  7. Android采用HttpClient下载图片

    在上一章中谈到Android采用HttpURLConnection下载图片,本章使用HttpClient下载图片 HttpURLConnection与HttpClient的差别: HttpClient ...

  8. oracle 11g常用命令

    1.监听启动监听lsnrctl start停止监听 lsnrctl stop 查看监听状态 lsnrctl status 2.启动用oracle用户进入su - oracle运行sqlplus命令,进 ...

  9. 使用 AngularJS 从零构建大型应用

    0.导言 1.准备工作 2.构建框架 3.丰富你的directives 4.公用的services 5.用controllers组织业务 导言 纵览线上各种AngularJS教程,大部分都是基础与一些 ...

  10. [转]oracle误删数据的恢复

    与数据打交道,免不了会误删一些数据,之后还commit了,连回滚的机会都没了,而更糟糕的是你又没有备份,这种事终于在今天被我不幸的遇上了... 唯一一点值得欣慰的是,我删除表记录的时候,时间不长,一天 ...