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

1：创建元素节点

2：创建文本节点

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

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

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

  1.  <div id="div1">
  2.  <p id="p1">This is a paragraph.</p>
  3.  <p id="p2">This is another paragraph.</p>
  4.  </div>
  5.  
  6.  <script>
  7.  var para=document.createElement("p");
  8.  var node=document.createTextNode("This is new.");
  9.  para.appendChild(node);
  10.  var element=document.getElementById("div1");
  11.  var child=document.getElementById("p1");
  12.  element.insertBefore(para,child);
  13.  </script>

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

修改 HTML 元素

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

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

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

创建 HTML 内容

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

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

实例

  1. <html>
  2. <body>
  3.  
  4. <p id="p1">Hello World!</p>
  5.  
  6. <script>
  7. document.getElementById("p1").innerHTML="New text!";
  8. </script>
  9.  
  10. </body>
  11. </html>

提示：我们将在下面的章节为您解释例子中的细节。

改变 HTML 样式

通过 HTML DOM，您能够访问 HTML 元素的样式对象。

下面的例子改变一个段落的 HTML 样式：

实例

  1. <html>
  2.  
  3. <body>
  4. <p id="p2">Hello world!</p>
  5.  
  6. <script>
  7. document.getElementById("p2").style.color="blue";
  8. </script>
  9.  
  10. </body>
  11. </html>

创建新的 HTML 元素

如需向 HTML DOM 添加新元素，您首先必须创建该元素（元素节点），然后把它追加到已有的元素上。

实例

  1. <div id="d1">
  2. <p id="p1">This is a paragraph.</p>
  3. <p id="p2">This is another paragraph.</p>
  4. </div>
  5.  
  6. <script>
  7. var para=document.createElement("p");
  8. var node=document.createTextNode("This is new.");
  9. para.appendChild(node);
  10.  
  11. var element=document.getElementById("d1");
  12. element.appendChild(para);
  13. </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. Git下的标签

    发布一个版本时,我们通常先在版本库中打一个标签(tag),这样,就唯一确定了打标签时刻的版本.将来无论什么时候,取某个标签的版本,就是把那个打标签的时刻的历史版本取出来.所以,标签也是版本库的一个快照 ...

  2. 《你说对就队》第八次团队作业：Alpha冲刺 第五天

    <你说对就队>第八次团队作业:Alpha冲刺 第五天 项目 内容 这个作业属于哪个课程 [教师博客主页链接] 这个作业的要求在哪里 [作业链接地址] 团队名称 <你说对就队> ...

  3. Scrapy——5 下载中间件常用函数、scrapy怎么对接selenium、常用的Setting内置设置有哪些

    Scrapy——5 下载中间件常用的函数 Scrapy怎样对接selenium 常用的setting内置设置 对接selenium实战 (Downloader Middleware)下载中间件常用函数 ...

  4. 【codeforces 796C】Bank Hacking(用一些技巧来代替multiset)

    [题目链接]:http://codeforces.com/contest/796/problem/C [题意] 给你n个节点,你一开始选择一个节点,然后打掉它,然后与被打掉过的节点相连的节点才能被 打 ...

  5. 利用Linux中的crontab实现分布式项目定时任务

    @Controller @RequestMapping("/task/topic") public class TopicQuartzController { protected ...

  6. DOM对象属性(property)与HTML标签特性(attribute)

    HTML中property与attribute是极易混淆的两个概念.大多数时候这两个单词都翻译为"属性",为了区分二者,一般将property翻译为"属性",a ...

  7. [USACO16OPEN]关闭农场Closing the Farm（洛谷 3144）

    题目描述 Farmer John and his cows are planning to leave town for a long vacation, and so FJ wants to tem ...

  8. Oracle-统计数据库表数据总数量

    create or replace procedure prc_table_count(p_flag out varchar2) AS TCOUNT number; SCOUNT number; CO ...

  9. UNIX环境编程学习——反思认识

     学习情况: 有关UNIX系统环境编程的学习时间用来非常长的时间.可是感觉效果还是不是太好,在中间经过了期末考试.用来非常长的时间用来学习专业课.就将该过程的学习放到了一边上,放假以后又回家造成了 ...

  10. java读取中文分词工具(一)

    import java.io.BufferedReader; import java.io.File; import java.io.FileInputStream; import java.io.I ...