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

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. hdu 1584 蜘蛛纸牌

    把小的牌放到大的牌上,求最小移动的距离和 DFS遍历所有的可能,把每一张牌与之要移动的牌都进行两层for的循环,注意回溯条件满足立刻break 代码(算法借鉴) #include <bits/s ...

  2. Linux之网络文件共享服务(NFS)

    概念: NFS:Network File System 网络文件系统,基于内核的文件系统.Sun公司开发,通过使用NFS,用户和程序可以像访问本地文件一样访问远端系统上的文件,基于RPC(Remote ...

  3. 《零压力学Python》 之 第三章知识点归纳

    第三章(第一个程序)知识点归纳 编程犹如写剧本.Python函数与剧本差别不大,你可以反复调用函数,而它每次都执行预定的“脚本”(脚本也可以指整个程序). 在Python IDLE中,真正的编程是从编 ...

  4. 第四节：DataFrame属性及方法（下）

  5. java中的redis工具类

    1.redis基础类 package com.qlchat.component.redis.template; import javax.annotation.PostConstruct; impor ...

  6. ZOJ 3687 The Review Plan I

    The Review Plan I Time Limit: 5000ms Memory Limit: 65536KB This problem will be judged on ZJU. Origi ...

  7. noip模拟赛 希望

    分析:题目中说用栈实现,我觉得这样很麻烦,就用了一个数组+指针解决了.其实就是大模拟. #include <stack> #include <string> #include ...

  8. hdu 4941 stl的map<node,int>用法

    #include<iostream> #include<cstdio> #include<cstring> #include<map> using na ...

  9. ggplot画图笔记

    1.数据集相加符号 %+% 2.图形属性映射 aesc()函数 aes(x=mpg,y=wt)  把mpg属性映射为x,wt属性映射为y 图层图形属性可以添加.修改和删除映射. 如 3.位置调整参数 ...

  10. 分享修改密码的SharePoint Web part: ITaCS Change Password web part

    Codeplex 上有一个现成的修改密码的Web part, 在SharePoint 2010和SharePoint 2013都可以用 项目地址:http://changepassword.codep ...