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

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. ASP.NET大闲话：ashx文件有啥用

    在VS中右击项目,添加新项,我们找到.ashx文件在新建项模板中叫做“一般处理程序”,那么这个一般处理程序用来干吗的呢? 我们可以这样地简单理解,嗯,不需搞得太复杂,它就类似.aspx文件,用于处理传 ...

  2. python爬虫17 | 听说你又被封 ip 了，你要学会伪装好自己，这次说说伪装你的头部

    这两天 有小伙伴问小帅b 为什么我爬取 xx 网站的时候 不返回给我数据 而且还甩一句话给我 “系统检测到您频繁访问,请稍后再来” 小帅b看了一下他的代码 ): requests.get(url) 瞬 ...

  3. BZOJ 2501 [usaco2010 Oct]Soda Machine

    [题意概述] 给出一个[0,1,000,000,000]的整数数轴,刚开始每个位置都为0,有n个区间加操作,最后询问数轴上最大的数是多少. [题解] 我写的是离散化后线段树维护区间最值. 其实貌似不用 ...

  4. 清北学堂模拟赛d3t4 a

    分析:很水的一道题,就是用栈来看看是不是匹配就好了,只是最后没有判断栈是否为空而WA了一个点,以后做题要注意了. #include <bits/stdc++.h> using namesp ...

  5. 相同的雪花 Hash

    相同的雪花 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 You may have heard that no two snowflakes are alike. ...

  6. cogs 167. [USACO Mar07] 月度花费

    167. [USACO Mar07] 月度花费 ★★   输入文件:expense.in   输出文件:expense.out   简单对比时间限制:1 s   内存限制:128 MB Farmer ...

  7. HDU 4508

    祼的完全背包问题 #include <iostream> #include <cstdio> #include <cstring> #include <alg ...

  8. 4.非关系型数据库（Nosql）之mongodb：普通索引，唯一索引

     一:普通索引 1创建一个新的数据库 > use toto; switched to db toto > show dbs; admin (empty) local 0.078GB & ...

  9. but no declaration can be found for element &#39;aop:aspectj-autoproxy&#39;.

    1.错误描写叙述 Multiple annotations found at this line: - cvc-complex-type.2.4.c: The matching wildcard is ...

  10. grails一对多双向关联

    前面分享了一些学习grails的心得,可是grails的知识还远不止这些,这次整理了一点有关grails一对多双向关联关系的知识.我认为这样的关联用的地方太多了,这次准备的样例是城市和区域的相关样例. ...