JS DOM create node

Add, delete, modify and query DOM node operations

document.write() can add nodes to the document

But there is a fatal problem, which will empty all the original nodes of the document

Therefore, it is not recommended to use

<!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>
    
    This is the original node~

    <script>
        
        myReady(function(){
            document.write("This is document.write Created node!");
        });

    </script>
</body>
</html>

 

 

create series method:

document.createElement create element node

document.createTextNode create text node

document.createComment create comment node

document.createDocumentFragment create document fragment node

. appendChild() append child element

Document.body.insertbefore (the node to be inserted, the insertion location); insert the node before the specified location

. firstChild first child element node

<!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("This is the annotation");
            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>

 

 

In IE6-8, createElement can be used to create elements that do not exist in the document

It can be used to make html5shiv, and it can be used for lower version IE compatible HTML tag elements

. split() string to array

Only ie will execute the content in IE conditional compilation statement / * @ cc_on @ * / and other browsers will process according to comments and will not execute, which can be used to distinguish whether it is IE browser or not

<!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;
                //All html5 New elements
                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(", ");
                //Get length
                var len=elements.length;
                //Add these elements in a loop
                while(len--){
                    document.createElement(elements[i]);
                }
            })();//Anonymous function self executing can avoid global pollution

        });
    </script>
</head>
<body>
    
<article>This is html5 element</article>

</body>
</html>

The above is an error. html5shiv code cannot be written in domReady, because the element creation needs to be completed before the dom tree is loaded

Here is the correct way

<!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;
            //All html5 New elements
            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(", ");
            //Get length
            var len=elements.length;
            //Add these elements in a loop
            while(len--){
                document.createElement(elements[len]);
            }
        })();//Anonymous function self executing can avoid global pollution

    </script>
</head>
<body>
    
<article>This is html5 element</article>

</body>
</html>

 

 

How to create nodes efficiently

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>

 

 

Limitations on using innerHTML:

In ie6-8, it is required that no space should appear on the leftmost side of the string, otherwise it will be removed

<!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="  This is a sentence~";
        box.innerHTML=str;

    </script>
</body>
</html>

 

 

For most browsers, script added using this method is invalid and will not execute

script is a scope free element, which will be deleted when added with innerHTML

Therefore, script must be selected after the scoped element

And you need to add the defer attribute to the script

This method is effective in IE6-8, but still invalid in higher versions of IE and other browsers

<!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>

 

 

Elements such as style meta link cannot be created separately

Unless it is also placed after a scoped element, such as < input type = "hidden" >

And only valid in 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>

 

The difference between innerHTML and 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>cat</b></div>
    <script>
        console.log(box.innerHTML);//<b>cat</b>
        console.log(box.outerHTML);//<div id="box"><b>cat</b></div>

    </script>
</body>
</html>

 

innerText extracts all text nodes in an element

Only text

<!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">start~<b>cat~</b>End~</div>
    <br>
    <div id="new1"></div>
    <div id="new2"></div>
    <script>
        console.log(box.innerText);//start~cat~End~
        console.log(box.innerHTML);//start~<b>cat~</b>End~

        var new1=document.getElementById("new1");
        new1.innerHTML="<b>adopt innerHTML Added</b>";
        var new2=document.getElementById("new2");
        new2.innerText="<b>adopt innerText Added</b>";
    </script>
</body>
</html>

 

innerText is not supported in earlier versions of firefox

Use: textContent compatible

<!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">start~<b>cat~</b>End~</div>
    
    <script>
        //Obtain innerText
        function getInnerText(ele){
            return (typeof ele.textContent=="string")?ele.textContent:ele.innerText;
        }
        //Set up innerText
        function setInnerText(ele,text){
            if(typeof ele.textContent=="string"){
                ele.textContent=text;
            }else{
                ele.innerText=text;
            }
        }
        
        console.log(getInnerText(box));
        setInnerText(box,"This is through setInnerText Set text")
    </script>
</body>
</html>

outerText is the same as innerText when getting

It will replace its own elements when setting, so it is not recommended to use

<!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">start~<b>cat~</b>End~</div>
    
    <script>    
        console.log(box.outerText);
        box.outerText="This is through outerText Set text";
    </script>
</body>
</html>

Tags: Javascript IE Fragment html5 Attribute

Posted on Thu, 06 Feb 2020 07:39:59 -0500 by rurouni