思路：创给节点添加一个元素：步骤：

1：创建元素节点

2：创建文本节点

3：将该文本添加到元素上

4：将该元素追加到其他元素上

appendChild() 方法，将新元素作为父元素的最后一个子元素进行添加，如需不想作为最后一个添加，则可使用 insertBefore() 方法。如下代码：

 <div id="div1">

 <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("div1");

 var child=document.getElementById("p1");

 element.insertBefore(para,child);

 </script>

修改 HTML = 改变元素、属性、样式和事件。

修改 HTML 元素

修改 HTML DOM 意味着许多不同的方面：

  • 改变 HTML 内容
  • 改变 CSS 样式
  • 改变 HTML 属性
  • 创建新的 HTML 元素
  • 删除已有的 HTML 元素
  • 改变事件（处理程序）

在接下来的章节，我们会深入学习修改 HTML DOM 的常用方法。

创建 HTML 内容

改变元素内容的最简答的方法是使用 innerHTML 属性。

下面的例子改变一个 <p> 元素的 HTML 内容：

实例

<html>

<body>

<p id="p1">Hello World!</p>

<script>

document.getElementById("p1").innerHTML="New text!";

</script>

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

js---html元素操作的更多相关文章

  1. D3.js系列——元素操作和简单画布操作

    一.元素操作: 1.选择元素 select 和 selectAll,以及选择集的概念 var p = d3.select("body").select("p") ...

  2. jquery/js iframe 元素操作

    1.判断id/ class 是否存在? <script> $(function(){ if(("#id_name").length()>0){ //如果id 存在 ...

  3. js中元素操作的有关内容与对比

    以下 A:代表原生js B:代表jQuery 1 创建元素/节点 A: 元素节点- createElement( ) 文本节点 - createTextNode() 例如: var a = docum ...

  4. js基础---元素操作时字符串拼接

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. SVG.js 元素操作整理（二）-Transform

    一.transform()获取或设置矩阵变换 var draw = SVG('svg1').size(300, 300); //Transforming SVG元素矩阵变换 var rect = dr ...

  6. selenium中元素操作之浏览器窗口滚动&网页日期控件操作（js操作）（五）

    js的滚动条scrollIntoView() Arguments[] - python与js之间的羁绊 1.移动到元素element对象的“底端”,与当前窗口的“底部”对齐: driver.execu ...

  7. 使用 Jquery-UI 实现一次拖拽多个选中的元素操作

    项目需要,实现一个拖放操作,要求每次可以拖拽选中的多个元素,释放到目标容器后可排序.考虑了一下,觉得jquery-ui比较合适,毕竟它提供了项目需要的交互性事件机制.拖拽.释放.排序.选择等效果.而在 ...

  8. selenium元素操作

    1.文本框(text field or textarea) element.sendKeys("test");//在输入框中输入内容: element.clear(); //将输入 ...

  9. nw.js如何处理拖放操作

    nw.js如何处理拖放操作 其实拖放(drag-drop)操作是Html5的功能,不是nw.js的内置API,那么我们采用Html5应用一般的处理方法就可以了. 首先我们看一下一个正常的页面,直接拖放 ...

  10. JS-006-表格元素操作

    直接上菜咯... 以下为 HTML 表格源码: <html> <head> <meta http-equiv="Content-Type" conte ...

随机推荐

  1. discourse论坛迁移

    在源设备的操作备份数据文件tar -czvf discoursefile716.tar.gz /var/discourse然后把此discoursefile716.tar.gz文件传到需要迁移的设备上 ...

  2. fzu 2124

    #include<stdio.h> #include<queue> #include<math.h> #include<algorithm> #incl ...

  3. java GC垃圾回收机制G1、CMS

    CMS(Concurrent Mark-Sweep)是以牺牲吞吐量为代价来获得最短回收停顿时间.对于要求服务器响应速度的应用上,这种垃圾回收器非常适合.在启动JVM参数加上-XX:+UseConcMa ...

  4. v$open_cursor的几个问题

    SQL order by SADDR desc ; SADDR SID USER ADDRESS HASH_VALUE SQL_ID SQL_TEXT -------- ---------- ---- ...

  5. MVC.Net：MVC.Net与WebAPI的IOC实现

    我们通过Ninject(http://www.ninject.org/)项目来帮助我们实现MVC.Net与WebAPI项目的IOC实现. 首先我们来看MVC.Net的IOC实现. 1. 通过NuGet ...

  6. HDU 4514

    真是神奇,G++TLE,C++500MS... 判环有一个图论知识就是,m>=n时必有环.如果以m的范围建图,会MLE. 然后,利用拓扑排序再来判定是否有环,因为有些景点可能是孤立的.同时,在拓 ...

  7. Swoole源代码学习记录（十二）——ReactorThread模块

    Swoole版本号:1.7.5-stable Github地址:https://github.com/LinkedDestiny/swoole-src-analysis 这一章将分析Swoole的Re ...

  8. USB设备驱动之设备初始化(设备枚举)

    USB设备从接入HUB到正常工作之前.都属于设备枚举阶段.所谓设备枚举.就是让host控制器认识USB设备,并为其准备资源.建立好主机与设备间的数据传递机制. 该阶段的工作,是USB通信协议规定的,所 ...

  9. windows脚本(VBS)之cmd命令行的妙用

    windows脚本(VBS)之cmd命令行的妙用 (2009-08-06 13:40:55) 转载▼ 标签: 脚本 cmd 命令行 vbs js 简单 公式 windows it 分类: 计算机 脚本 ...

  10. 关于isset的一点说明

    作者:zhanhailiang 日期:2014-10-08 今天遇到一个非常奇怪的bug,測试例如以下: <? php $a = 'abc'; var_dump(isset($a['code'] ...