JS DOM创建节点

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创建节点的更多相关文章

JavaScript之DOM创建节点
上几篇文章中我们罗列了一些获取HTML页面DOM对象的方法,当我们获取到了这些对象之后,下一步将对这些对象进行更改,在适当的时候进行对象各属性的修改就形成了我们平时看到的动态效果.具体js中可以修改D ...
DOM创建节点
1.DOM--document object model 常用的节点类型: 元素节点:(标签) 属性节点:(标签里的属性) 文本节点:(文本节点) 2,document有个属性叫nodetype,返回 ...
js添加创建节点和合并节点
var _div = document.createElement("div"), //创建节点 txt1 = document.createTextNode("123& ...
js dom 创建table标签和子属性，以及创建多选框
代码: <div class="Category"> <span id="Edit_headerTitle">Edit Categori ...
js递归方法创建节点
var jsonData = [{,,"subnetRemark":"状态自带","subnetName":"中心网络" ...
JS Dom节点操作demo!
通过黑马课程的学习,在这里分享一个js Dom中节点操作的小练习需求:使用js创建一个4*3的表格table. onload = function(){ function c(tagName){ r ...
jQuery_DOM学习之------创建节点及节点属性
DOM创建节点及节点属性一.创建新的节点并添加到dom中 dom 节点创建的过程(创建节点<元素.属性.文本等>.添加节点的属性.加入到文档中) jQuery创建元素节点的方法: 创建元 ...
JS DOM操作（创建、遍历、获取、操作、删除节点）
创建节点 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="u ...
js创建节点及其属性
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

随机推荐

freemark 基本使用
实际上用程序语言编写的程序就是模板. FTL (代表FreeMarker模板语言). 这是为编写模板设计的非常简单的编程语言. 模板(FTL编程)是由如下部分混合而成的: 文本:文本会照着原样来输出. ...
Java 中的各种锁和 CAS + 面试题
Java 中的各种锁和 CAS + 面试题如果说快速理解多线程有什么捷径的话,那本文介绍的各种锁无疑是其中之一,它不但为我们开发多线程程序提供理论支持,还是面试中经常被问到的核心面试题之一.因此下面 ...
Linux防火墙之iptables常用扩展匹配条件（二）
上一篇博文我们讲到了iptables的一些常用的扩展匹配模块以及扩展模块的一些选项的说明,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/12273755.htm ...
（数据科学学习手札75）基于geopandas的空间数据分析——坐标参考系篇
本文对应代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介在上一篇文章中我们对geopandas中的数据结 ...
Codeforces 961C Chessboard（将碎了的、染色乱了的棋盘碎片拼一起）
题目链接:点击打开链接 Magnus decided to play a classic chess game. Though what he saw in his locker shocked hi ...
Python 元类 - Metaclasses
Python 元类 - Metaclasses 默认情况下儿, classes 是有 type() 构造的. 类的结构体在一个新的 namespace 被执行, 类的名字 class name 绑定( ...
javascript 动态加载javascript文件
/* loadFile(data, callback): 动态加载js文件 data: 存放需要加载的js文件的url("url" || ["url", &qu ...
基于MATLAB的单级倒立摆仿真
有关代码及word文档请关注公众号“浮光倾云”,后台回复A010.02即可获取一.单级倒立摆概述倒立摆是处于倒置不稳定状态,人为控制使其处于动态平衡的一种摆,是一类典型的快速.多变量.非线性.强耦 ...
Language Model
在某次会上的语言模型的ppt.
zabbix 自定义监控项每隔1分钟检测一次三次失败报警
在agent上添加 UserParameter=auth.check,/etc/zabbix/auth_monitor/auth_check.py auth.check就是之后添加的自定义的item值 ...

JS DOM创建节点

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

随机推荐

热门专题