DOM节点操作

document.write("<h1>You are my sunshine</h1>");

可以用创建节点,但是如果:对DOMContentLoaded事件的处理采用标准的事件绑定方式进行绑定,就会影响原来的网页布局。所以,不能使用该方式创建节点。

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
    <script>
       myReady(function(){
        var container=document.getElementById('container');//获取对象
        console.log(container.textContent);//所有的文本内容都会被拼接起来。
        container.textContent="<p>You are my sumshime!</p>";//这里的p标签会被当做是文本内容,而不是文本节点。
        });
    </script>
</head>
<body>
    <div id="container">我爱你
        <ul>
            <li>我爱你</li>
            <li>我爱你</li>
        </ul>
    </div>
</body>
</html>
===========其他浏览器支持innerText,firefox支持textContent=============
    -------上面只需要把innerText换成textContent火狐即可支持-----------
console.log(container.innerText);//所有的文本内容都会被拼接起来。
显示如下:
我爱你
我爱你
我爱你

container.innerText="<p>You are my sumshime!</p>";
//这里的p标签会被当做是文本内容,而不是文本节点。审查元素结构显示如下:
<div id="container">&lt;p&gt;You are my sumshime!&lt;/p&gt;</div>
文本显示:<p>You are my sumshime!</p>  这里的是文本内容,不是元素节点。
-----------------



====================================
以下是兼容所有浏览器,html元素获取内容和设置内容的通用方法:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
    <script>
       myReady(function(){
            var container=document.getElementById('container');//获取对象
            /**
             * 兼容所有浏览器获取对象内容
             * @param  {object} element 获取内容的对象
             * @return {对象的属性}         对象的文本内容
             */
            function getInnerText(element){
                return typeof (element.textContent == "string") ? element.textContent : element.innerText;
            }

            /**
             * 兼容所有浏览器设置对象的内容
             * @param {object} element 需要设置内容的对象
             * @param {字符串} text    文本内容
             */
            function setInnerText(element,text){
                if (typeof element.textContent == "string") {
                    element.textContent=text;
                }else{
                    element.innerText=text;
                }
            }
            console.log(getInnerText(container));
            setInnerText(container,"hello world!");//设置container的文本内容,覆盖之前的所有内容。
        });
    </script>
</head>
<body>
    <div id="container">我爱你
        <ul>
            <li>我爱你</li>
            <li>我爱你</li>
        </ul>
    </div>
</body>
</html>

==========================
container.outerText="<p> you are my sumshime!";//用于覆盖整个对象及其内容,不支持火狐浏览器,一般不怎么使用,了解即可。

    经测试:container.innerText="You are my sumshime!";只有 IE 5 7 8不支持。其他浏览器最新版本都支持,旧的版本就有可能不支持了,所以还是建议使用兼容性方法。
    是否支持是这样的。
    var container=document.getElementById("container");//获得标签对象。
    container.innerText=="You are my sumshime!";  如果支持:修改container对象里面的内容,其类型是:string,不支持返回的类型是:undefined。
    container.textContent=="You are my sumshime!"; 如果支持:修改container对象里面的内容,其类型是:string,不支持返回的类型是:undefined。
    所以这里可以使用:
    typeof(container.innerText=="string")  支持:返回string类型,不支持返回:undefined.
    typeof(container.textContent=="string")  支持:返回string类型,不支持返回:undefined.

    可以封装成一个函数:
    /**
     * 获取对象里面的内容
     * @param  {object} element html标签对象
     * @return {string}         标签里面的内容
     */
    function getInnerText(element){
        return container.innerText=="string"?container.innerText:container.textContent;
    }
    
    /**
     * 设置标签对象里面的内容
     * @param {object} element 需要要设置内容的标签
     * @param {string} text    标签里面的内容
     */
    function setTextContent(element,text){
        return container.innerText=="string"?container.innerText=text:container.textContent=text;
    }

==============outerText===================
    <script src="js/domready.js"></script><!--必须导入该文件,搜狗输入domready.js-->
    <script>
       myReady(function(){
        /*******outerText,IE5 7 8 都支持,就是不支持firefox*********/
            var container=document.getElementById('container');
            /**
             * 获取对象以及对象里面的所有内容
             * @param  {html对象} element html标签
             * @return {string}         对象以及对象里面的所有内容
             */
            function getOuterText(element){
                return element.outerText;
            }

            /**
             * 覆盖整个对象以及里面所有内容
             * @param {html对象} element html标签
             * @param {string} text    覆盖对象的内容
             */
            function setOuterText(element,text){
                return element.outerText=text;
            }
            alert(getOuterText(container));
            alert(setOuterText(container,"You are my sumshime!"));
       })
    </script>
</head>
<body>
    <div id="container">我爱你
        <ul>
            <li>我爱你</li>
            <li>我爱你</li>
        </ul>
    </div>
</body>
</html>

container=document.getElementById("div1);

container.outerHTML="<p>You are my sumshime!</p>";   //outerHTML是把整个container以及子元素里面的所有内容都替换掉。

原文地址:https://www.cnblogs.com/Knowledge-is-infinite/p/10806636.html