JS DOM创建节点

DOM节点操作之增删改查

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

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

因此不推荐使用

<!DOCTYPE html>
<html lang="en"head>
    Meta charset="UTF-8"title>Document</style>
        body{
            width:100%;
            height;
        }
    script src="DomReady.js"></script>

body>
    
    这是原有的节点哦~

    
        
        myReady(function(){
            document.write("这是document.write创建的节点！);
        });

    html>

create系列方法：

document.createElement 创建元素节点

document.createTextNode 创建文本节点

document.createComment 创建注释节点

document.createDocumentFragment 创建文档片段节点

.appendChild() 追加子元素

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

.firstChild 第一个子元素节点

>
    
    ul id="list"ul>

            
        myReady((){
            var comment=document.createComment(这是注释呀);
             uldocument.getElementById(list linull;
             fragmentdocument.createDocumentFragment();
            for( i0;i<3++){
                lidocument.createElement(li);
                li.appendChild(document.createTextNode(item+(i1)));
                fragment.appendChild(li);
            }
            ul.appendChild(fragment);
            document.body.insertBefore(comment,ul);

        });
    >

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

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

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

name="viewport" content="width=device-width,initial-scale=1.0"
        articlecolororangearticle>直接添加html5元素在IE8以下无法识别>
     articlearticle);
    article.innerHTML这是document.createElement创建的HTML5元素;
    document.body.appendChild(article);
>

.split() 字符串转数组

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

}
            font-size14px
            color
        myReady((){
            ((){
                if!/*@cc_on!@*/) return;
                //所有html5新增元素
                 elementsabbr,article,aside,audio,canvas,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video.split(,);
                获取长度
                 lenelements.length;
                循环添加这些元素
                while(len--){
                    document.createElement(elements[i]);
                }
            })();匿名函数自执行，可以避免污染全局

        });
    >
    
>这是html5元素>

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

以下是正确写法


        (所有html5新增元素
            获取长度
            elements.length;
            循环添加这些元素
            ){
                document.createElement(elements[len]);
            }
        })();匿名函数自执行，可以避免污染全局

    >

高效创建节点的方法

innerHTML

outerHTML

innerText

outerText

>
        );
         str<li>item1</li>+
                <li>item2</li><li>item3</li>;
        ul.innerHTMLstr;

    >

使用innerHTML的限制：

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


        div
            border2px solid pink
            background#abcdefdiv ="Box"div BoxBox  这是一句话哦~;
        Box.innerHTML>

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

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

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

并且需要给script添加defer属性

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

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

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

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

并且只在IE6-8中有效

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

innerHTML和outerHTML的区别：

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

    >

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

只有文本

>开始~>喵喵喵~>结束~br="new1"="new2"
        console.log(Box.innerText);开始~喵喵喵~结束~
        console.log(Box.innerHTML);开始~<b>喵喵喵~</b>结束~

         new1new1);
        new1.innerHTML<b>通过innerHTML添加的</b>;
         new2new2);
        new2.innerText<b>通过innerText添加的</b>;
    >

低版本firefox不支持innerText

使用：textContent 兼容

获取innerText
         getInnerText(ele){
             (typeof ele.textContent==string)?ele.textContent:ele.innerText;
        }
        设置innerText
         setInnerText(ele,text){
            ){
                ele.textContenttext;
            }else{
                ele.innerTexttext;
            }
        }
        
        console.log(getInnerText(Box));
        setInnerText(Box,1)">这是通过setInnerText设置的文本哦)
    >

outerText在获取时和innerText相同

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

    
        console.log(Box.outerText);
        Box.outerText这是通过outerText设置的文本哦>

JS DOM创建节点

猜你在找的JavaScript相关文章