DOM节点操作之增删改查

document.write() 可以向文档中添加节点

但是有个致命问题，会把文档原有的节点全部清空

因此不推荐使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         body{
  8.             width:100%;
  9.             height:100%;
  10.         }
  11.     </style>
  12.     <script src="DomReady.js"></script>
  13.  
  14. </head>
  15. <body>
  16.  
  17.     这是原有的节点哦~
  18.  
  19.     <script>
  20.  
  21.         myReady(function(){
  22.             document.write("这是document.write创建的节点！");
  23.         });
  24.  
  25.     </script>
  26. </body>
  27. </html>

create系列方法：

document.createElement  创建元素节点

document.createTextNode 创建文本节点

document.createComment 创建注释节点

document.createDocumentFragment 创建文档片段节点

.appendChild() 追加子元素

document.body.insertBefore(要插入的节点，插入的位置);  在指定位置前插入节点

.firstChild  第一个子元素节点

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         body{
  8.             width:100%;
  9.             height:100%;
  10.         }
  11.     </style>
  12.     <script src="DomReady.js"></script>
  13. </head>
  14. <body>
  15.  
  16.     <ul id="list"></ul>
  17.  
  18.     <script>
  19.         myReady(function(){
  20.             var comment=document.createComment("这是注释呀");
  21.             var ul=document.getElementById("list");
  22.             var li=null;
  23.             var fragment=document.createDocumentFragment();
  24.             for(var i=0;i<3;i++){
  25.                 li=document.createElement("li");
  26.                 li.appendChild(document.createTextNode("item"+(i+1)));
  27.                 fragment.appendChild(li);
  28.             }
  29.             ul.appendChild(fragment);
  30.             document.body.insertBefore(comment,ul);
  31.  
  32.         });
  33.     </script>
  34. </body>
  35. </html>

在IE6-8中，createElement可以用来创建文档中本不存在的元素

可以用来做html5shiv，用于低版本IE兼容html标签元素

document.createElement()创建的HTML5标签是可以兼容IE8以下的浏览器，并在页面中正常显示该标签所设置的样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         article{color:orange;}
  9.     </style>
  10. </head>
  11. <body>
  12.     <article>直接添加html5元素在IE8以下无法识别</article>
  13. <script>
  14.     var article=document.createElement("article");
  15.     article.innerHTML="这是document.createElement创建的HTML5元素";
  16.     document.body.appendChild(article);
  17. </script>
  18. </body>
  19. </html>

.split() 字符串转数组

IE条件编译语句 /*@cc_on  @*/   里面的内容只有IE会执行，其余浏览器会按照注释来处理，不会执行，可以用于区别是否是IE浏览器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         body{
  8.             width:100%;
  9.             height:100%;
  10.         }
  11.         article{
  12.             font-size:14px;
  13.             color:orange;
  14.         }
  15.     </style>
  16.     <script src="DomReady.js"></script>
  17.     <script>
  18.         myReady(function(){
  19.             (function(){
  20.                 if(!/*@cc_on!@*/0) return;
  21.                 //所有html5新增元素
  22.                 var elements="abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(", ");
  23.                 //获取长度
  24.                 var len=elements.length;
  25.                 //循环添加这些元素
  26.                 while(len--){
  27.                     document.createElement(elements[i]);
  28.                 }
  29.             })();//匿名函数自执行，可以避免污染全局
  30.  
  31.         });
  32.     </script>
  33. </head>
  34. <body>
  35.  
  36. <article>这是html5元素</article>
  37.  
  38. </body>
  39. </html>

以上是错误的，html5shiv代码不能写在domReady中，因为创建元素需要在dom树加载之前完成

以下是正确写法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         body{
  8.             width:100%;
  9.             height:100%;
  10.         }
  11.         article{
  12.             font-size:14px;
  13.             color:orange;
  14.         }
  15.     </style>
  16.     <script src="DomReady.js"></script>
  17.     <script>
  18.         (function(){
  19.             if(!/*@cc_on!@*/0) return;
  20.             //所有html5新增元素
  21.             var elements="abbr, article, aside, audio, canvas, datalist, details, dialog, eventsource, figure, footer, header, hgroup, mark, menu, meter, nav, output, progress, section, time, video".split(", ");
  22.             //获取长度
  23.             var len=elements.length;
  24.             //循环添加这些元素
  25.             while(len--){
  26.                 document.createElement(elements[len]);
  27.             }
  28.         })();//匿名函数自执行，可以避免污染全局
  29.  
  30.     </script>
  31. </head>
  32. <body>
  33.  
  34. <article>这是html5元素</article>
  35.  
  36. </body>
  37. </html>

高效创建节点的方法

innerHTML

outerHTML

innerText

outerText

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         body{
  8.             width:100%;
  9.             height:100%;
  10.         }
  11.     </style>
  12.     <script src="DomReady.js"></script>
  13. </head>
  14. <body>
  15.  
  16.     <ul id="list"></ul>
  17.     <script>
  18.         var ul=document.getElementById("list");
  19.         var str="<li>item1</li>"+
  20.                 "<li>item2</li>"+
  21.                 "<li>item3</li>";
  22.         ul.innerHTML=str;
  23.  
  24.     </script>
  25. </body>
  26. </html>

使用innerHTML的限制：

IE6~8中，要求字符串的最左边不能出现空格，否则会被移除

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         body{
  8.             width:100%;
  9.             height:100%;
  10.         }
  11.         div{
  12.             border:2px solid pink;
  13.             background:#abcdef;
  14.         }
  15.     </style>
  16.     <script src="DomReady.js"></script>
  17. </head>
  18. <body>
  19.  
  20.     <div id="box"></div>
  21.     <script>
  22.         var box=document.getElementById("box");
  23.         var str="  这是一句话哦~";
  24.         box.innerHTML=str;
  25.  
  26.     </script>
  27. </body>
  28. </html>

大多数浏览器来说，使用该方法添加的script脚本是无效的，不会执行

script属于无作用域元素，使用innerHTML添加时会被要求删除

因此要求script必须在有作用域的元素之后，首选<input type="hidden">

并且需要给script添加defer属性

这种做法在IE6-8是有效的，在IE高版本以及其他浏览器中依旧无效

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         body{
  8.             width:100%;
  9.             height:100%;
  10.         }
  11.         div{
  12.             border:2px solid pink;
  13.             background:#abcdef;
  14.         }
  15.     </style>
  16.     <script src="DomReady.js"></script>
  17. </head>
  18. <body>
  19.  
  20.     <div id="box"></div>
  21.     <script>
  22.         var box=document.getElementById("box");
  23.         var str="<input type='hidden'><script defer>alert('hello~');<\/script>";
  24.         box.innerHTML=str;
  25.  
  26.     </script>
  27. </body>
  28. </html>

不能单独创建style  meta  link等元素

除非也是放置在有作用域的元素之后，如<input type="hidden">

并且只在IE6-8中有效

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         body{
  8.             width:100%;
  9.             height:100%;
  10.         }
  11.     </style>
  12.     <script src="DomReady.js"></script>
  13. </head>
  14. <body>
  15.     <div id="box"></div>
  16.     <script>
  17.         var box=document.getElementById("box");
  18.         var str="<input type='hidden'><style>body{background:#abcdef;}<\/style>";
  19.         box.innerHTML=str;
  20.  
  21.     </script>
  22. </body>
  23. </html>

innerHTML和outerHTML的区别：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         body{
  8.             width:100%;
  9.             height:100%;
  10.         }
  11.     </style>
  12.     <script src="DomReady.js"></script>
  13. </head>
  14. <body>
  15.     <div id="box"><b>喵喵喵</b></div>
  16.     <script>
  17.         console.log(box.innerHTML);//<b>喵喵喵</b>
  18.         console.log(box.outerHTML);//<div id="box"><b>喵喵喵</b></div>
  19.  
  20.     </script>
  21. </body>
  22. </html>

innerText  提取元素中所有的文本节点

只有文本

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         body{
  8.             width:100%;
  9.             height:100%;
  10.         }
  11.     </style>
  12.     <script src="DomReady.js"></script>
  13. </head>
  14. <body>
  15.     <div id="box">开始~<b>喵喵喵~</b>结束~</div>
  16.     <br>
  17.     <div id="new1"></div>
  18.     <div id="new2"></div>
  19.     <script>
  20.         console.log(box.innerText);//开始~喵喵喵~结束~
  21.         console.log(box.innerHTML);//开始~<b>喵喵喵~</b>结束~
  22.  
  23.         var new1=document.getElementById("new1");
  24.         new1.innerHTML="<b>通过innerHTML添加的</b>";
  25.         var new2=document.getElementById("new2");
  26.         new2.innerText="<b>通过innerText添加的</b>";
  27.     </script>
  28. </body>
  29. </html>

低版本firefox不支持innerText

使用：textContent 兼容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         body{
  8.             width:100%;
  9.             height:100%;
  10.         }
  11.     </style>
  12.     <script src="DomReady.js"></script>
  13. </head>
  14. <body>
  15.     <div id="box">开始~<b>喵喵喵~</b>结束~</div>
  16.  
  17.     <script>
  18.         //获取innerText
  19.         function getInnerText(ele){
  20.             return (typeof ele.textContent=="string")?ele.textContent:ele.innerText;
  21.         }
  22.         //设置innerText
  23.         function setInnerText(ele,text){
  24.             if(typeof ele.textContent=="string"){
  25.                 ele.textContent=text;
  26.             }else{
  27.                 ele.innerText=text;
  28.             }
  29.         }
  30.  
  31.         console.log(getInnerText(box));
  32.         setInnerText(box,"这是通过setInnerText设置的文本哦")
  33.     </script>
  34. </body>
  35. </html>

outerText在获取时和innerText相同

在设置时会替换掉本身的元素，因此不建议使用

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style>
  7.         body{
  8.             width:100%;
  9.             height:100%;
  10.         }
  11.     </style>
  12.     <script src="DomReady.js"></script>
  13. </head>
  14. <body>
  15.     <div id="box">开始~<b>喵喵喵~</b>结束~</div>
  16.  
  17.     <script>
  18.         console.log(box.outerText);
  19.         box.outerText="这是通过outerText设置的文本哦";
  20.     </script>
  21. </body>
  22. </html>

JS DOM创建节点的更多相关文章

  1. JavaScript之DOM创建节点

    上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...

  2. DOM创建节点

    1.DOM--document object model 常用的节点类型: 元素节点:(标签) 属性节点:(标签里的属性) 文本节点:(文本节点) 2,document有个属性叫nodetype,返回 ...

  3. js添加创建节点和合并节点

    var _div = document.createElement("div"), //创建节点 txt1 = document.createTextNode("123& ...

  4. js dom 创建table标签和子属性， 以及创建多选框

    代码: <div class="Category"> <span id="Edit_headerTitle">Edit Categori ...

  5. js递归方法创建节点

    var jsonData = [{,,"subnetRemark":"状态自带","subnetName":"中心网络" ...

  6. JS Dom节点操作demo!

    通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习 需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...

  7. jQuery_DOM学习之------创建节点及节点属性

    DOM创建节点及节点属性 一.创建新的节点并添加到dom中 dom 节点创建的过程(创建节点<元素.属性.文本等>.添加节点的属性.加入到文档中) jQuery创建元素节点的方法: 创建元 ...

  8. JS DOM操作（创建、遍历、获取、操作、删除节点）

    创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...

  9. js创建节点及其属性

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

随机推荐

  1. Dockers 部署 MongoDB + mongo-express

    1. 拉取 Mongo 镜像 docker pull mongo: 2.  运行镜像 docker run -d --name mongodb --volume /usr/local/mongodat ...

  2. DRF框架之Serializer序列化器的反序列化操作

    昨天,我们完成了Serializer序列化器的反序列化操作,那么今天我们就来学习Serializer序列化器的最后一点知识,反序列化操作. 首先,我们定要明确什么是反序列化操作? 反序列化操作:JOS ...

  3. 4、Oracle 数据库 startup 报错：ORA-27102: out of memory

    1.数据库启动报错: ORA-: out of memory SQL> startup pfile='/db/oracle/init.ora'; ORA-: out of memory Linu ...

  4. C++反汇编代码分析--函数调用

    推荐阅读: C++反汇编代码分析–函数调用 C++反汇编代码分析–循环结构 C++反汇编代码分析–偷调函数 走进内存,走进汇编指令来看C/C++指针 代码如下: #include "stdl ...

  5. ubuntu 14.04 安装wordpress

    转者注:若没有Apache + PHP + MySQL环境,请参考我的这篇博客 (1)首先下载wordpress, sudo wget http://wordpress.org/latest.tar. ...

  6. 详解c++中对二维数组下标[][]的重载

    首先定义一个矩阵类,我用一个二维数组存储矩阵中的数据,矩阵详细定义如下 class Matrix { public: Matrix(int rows, int cols) { _rows = rows ...

  7. php gettype()函数

      gettype() 会根据 参数类型返回值: boolean:表示变量为布尔类型 integer:表示变量为整数类型 double :表示变量为float类型(历史原因) string:表示变量为 ...

  8. 各类JWT库(java)的使用与评价

    [搬运工] 出处:http://andaily.com/blog/?p=956 在 https://jwt.io/ 网站中收录有各类语言的JWT库实现(有关JWT详细介绍请访问 https://jwt ...

  9. [Redis-Python]发布订阅通过Redis异步发送邮件

    接收订阅 #!/usr/bin/env pyhton # coding:utf-8 # @Time : 2020-02-16 21:36 # @Author : LeoShi # @Site : # ...

  10. 【转载】详解linux下的串口通讯开发

    来源:https://www.cnblogs.com/sunyubo/archive/2010/09/26/2282116.html 串行口是计算机一种常用的接口,具有连接线少,通讯简单,得到广泛的使 ...