DOM节点操作之增删改查

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

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

因此不推荐使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    这是原有的节点哦~

    <script>

        myReady(function(){

            document.write("这是document.write创建的节点！");

        });

    </script>

</body>

</html>

create系列方法：

document.createElement  创建元素节点

document.createTextNode 创建文本节点

document.createComment 创建注释节点

document.createDocumentFragment 创建文档片段节点

.appendChild() 追加子元素

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

.firstChild  第一个子元素节点

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    <ul id="list"></ul>

    <script>

        myReady(function(){

            var comment=document.createComment("这是注释呀");

            var ul=document.getElementById("list");

            var li=null;

            var fragment=document.createDocumentFragment();

            for(var i=0;i<3;i++){

                li=document.createElement("li");

                li.appendChild(document.createTextNode("item"+(i+1)));

                fragment.appendChild(li);

            }

            ul.appendChild(fragment);

            document.body.insertBefore(comment,ul);

        });

    </script>

</body>

</html>

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

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

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        article{color:orange;}

    </style>

</head>

<body>

    <article>直接添加html5元素在IE8以下无法识别</article>

<script>

    var article=document.createElement("article");

    article.innerHTML="这是document.createElement创建的HTML5元素";

    document.body.appendChild(article);

</script>

</body>

</html>

.split() 字符串转数组

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

        article{

            font-size:14px;

            color:orange;

        }

    </style>

    <script src="DomReady.js"></script>

    <script>

        myReady(function(){

            (function(){

                if(!/*@cc_on!@*/0) return;

                //所有html5新增元素

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

                //获取长度

                var len=elements.length;

                //循环添加这些元素

                while(len--){

                    document.createElement(elements[i]);

                }

            })();//匿名函数自执行，可以避免污染全局

        });

    </script>

</head>

<body>

<article>这是html5元素</article>

</body>

</html>

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

以下是正确写法

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

        article{

            font-size:14px;

            color:orange;

        }

    </style>

    <script src="DomReady.js"></script>

    <script>

        (function(){

            if(!/*@cc_on!@*/0) return;

            //所有html5新增元素

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

            //获取长度

            var len=elements.length;

            //循环添加这些元素

            while(len--){

                document.createElement(elements[len]);

            }

        })();//匿名函数自执行，可以避免污染全局

    </script>

</head>

<body>

<article>这是html5元素</article>

</body>

</html>

高效创建节点的方法

innerHTML

outerHTML

innerText

outerText

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    <ul id="list"></ul>

    <script>

        var ul=document.getElementById("list");

        var str="<li>item1</li>"+

                "<li>item2</li>"+

                "<li>item3</li>";

        ul.innerHTML=str;

    </script>

</body>

</html>

使用innerHTML的限制：

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

        div{

            border:2px solid pink;

            background:#abcdef;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    <div id="box"></div>

    <script>

        var box=document.getElementById("box");

        var str="  这是一句话哦~";

        box.innerHTML=str;

    </script>

</body>

</html>

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

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

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

并且需要给script添加defer属性

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

        div{

            border:2px solid pink;

            background:#abcdef;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    <div id="box"></div>

    <script>

        var box=document.getElementById("box");

        var str="<input type='hidden'><script defer>alert('hello~');<\/script>";

        box.innerHTML=str;

    </script>

</body>

</html>

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

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

并且只在IE6-8中有效

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    <div id="box"></div>

    <script>

        var box=document.getElementById("box");

        var str="<input type='hidden'><style>body{background:#abcdef;}<\/style>";

        box.innerHTML=str;

    </script>

</body>

</html>

innerHTML和outerHTML的区别：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    <div id="box"><b>喵喵喵</b></div>

    <script>

        console.log(box.innerHTML);//<b>喵喵喵</b>

        console.log(box.outerHTML);//<div id="box"><b>喵喵喵</b></div>

    </script>

</body>

</html>

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

只有文本

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    <div id="box">开始~<b>喵喵喵~</b>结束~</div>

    <br>

    <div id="new1"></div>

    <div id="new2"></div>

    <script>

        console.log(box.innerText);//开始~喵喵喵~结束~

        console.log(box.innerHTML);//开始~<b>喵喵喵~</b>结束~

        var new1=document.getElementById("new1");

        new1.innerHTML="<b>通过innerHTML添加的</b>";

        var new2=document.getElementById("new2");

        new2.innerText="<b>通过innerText添加的</b>";

    </script>

</body>

</html>

低版本firefox不支持innerText

使用：textContent 兼容

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    <div id="box">开始~<b>喵喵喵~</b>结束~</div>

    <script>

        //获取innerText

        function getInnerText(ele){

            return (typeof ele.textContent=="string")?ele.textContent:ele.innerText;

        }

        //设置innerText

        function setInnerText(ele,text){

            if(typeof ele.textContent=="string"){

                ele.textContent=text;

            }else{

                ele.innerText=text;

            }

        }

        console.log(getInnerText(box));

        setInnerText(box,"这是通过setInnerText设置的文本哦")

    </script>

</body>

</html>

outerText在获取时和innerText相同

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        body{

            width:100%;

            height:100%;

        }

    </style>

    <script src="DomReady.js"></script>

</head>

<body>

    <div id="box">开始~<b>喵喵喵~</b>结束~</div>

    <script>

        console.log(box.outerText);

        box.outerText="这是通过outerText设置的文本哦";

    </script>

</body>

</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. CUDA学习（七）之使用CUDA内置API计时

    问题:对于使用GPU计算时,都想知道kernel函数运行所耗费的时间,使用CUDA内置的API可以方便准确的获得kernel运行时间. 在CPU上,可以使用clock()函数和GetTickCount ...

  2. Java 程序是如何执行的

    Java 程序是如何执行的 了解任何一门语言的精髓都是先俯览其全貌,从宏观的视角把握全局,然后再深入每个知识点逐个击破,这样就可以深入而快速的掌握一项技能.同样学习 Java 也是如此,本节就让我们先 ...

  3. list练习题—输入工人信息

    1) 创建一个List,在List 中增加三个工人,基本信息如下: 姓名 年龄 工资 zhang3 18 3000 li4 25 3500 wang5 22 3200 2) 在li4 之前插入一个工人 ...

  4. 办公环境下k8s网络互通方案

    在 kubernetes 的网络模型中,基于官方默认的 CNI 网络插件 Flannel,这种 Overlay Network(覆盖网络)可以轻松的实现 pod 间网络的互通.当我们把基于 sprin ...

  5. Ansi、Unicode、UTF8字符串之间的转换和写入文本文件

    转载请注明出处http://www.cppblog.com/greatws/archive/2008/08/31/60546.html 最近有人问我关于这个的问题,就此写一篇blog Ansi字符串我 ...

  6. Shell: 定期存档日志文件

    简介 对于日志的分割删除我们一般会使用logratate,但对于项目较多的情况下,会让开发直接将日志分割写在代码里面,对于分割后过期的日志定期删除就很有必要,不然膨胀的日志会占满你的磁盘,将多余的日志 ...

  7. 强烈推荐 10 款珍藏的 Chrome 浏览器插件

    Firebug 的年代,我是火狐(Mozilla Firefox)浏览器的死忠:但后来不知道为什么,该插件停止了开发,导致我不得不寻求一个新的网页开发工具.那段时间,不少人开始推荐 Chrome 浏览 ...

  8. java 子线程定时去更改主线程的变量

    在一次代码编写场景,需要post一些数据,同时携带获得的token,(但是token的有效时间是7200s),但是post需要很多次,很长时间,不可能2小时候中断程序,手动去获取token,这样效率太 ...

  9. 能否不同udp socket绑定到同一IP地址和port

    http://www.softlab.ntua.gr/facilities/documentation/unix/unix-socket-faq/unix-socket-faq-4.html http ...

  10. 一次压力测试Bug排查-epoll使用避坑指南

    Bug复现 使用Webbench对服务器进行压力测试,创建1000个客户端,并发访问服务器10s,正常情况下有接近8万个HTTP请求访问服务器. 结果显示仅有7个请求被成功处理,0个请求处理失败,服务 ...