向Dom中添加元素与文本节点的属性和方法

  • inner/outerHTML,inner/outerText,textContent

　　　　这些属性由js字符串创建，向Dom中添加节点。

<body>
    <div id="a">aaa</div>
    <div id="b"></div>
    <div id="c"></div>
    <div id="d"></div>
    <div id="e"></div>
    <script>
        //创建strong元素与文本节点添加到Dom
        document.getElementById('a').innerHTML = '<i>AAA</i>';
        //创建strong元素替换div#b
        document.getElementById('b').outerHTML = '<strong>changed</strong>'
        //创建文本节点并更新div#c中的内容
        document.getElementById('c').textContent = 'cc';
        document.getElementById('d').innerText = 'dd';
        //创建文本节点并替换div#d
        document.getElementById('e').outerText = '<strong>bold</strong>';
        console.log(document.body.innerHTML);
    </script>
</body>

 

输出：

  1. <div id="a"><i>AAA</i></div>
  2. <strong>changed</strong>
  3. <div id="c">cc</div>
  4. <div id="d">dd</div>
  5. &lt;strong&gt;bold&lt;/strong&gt;

总结：

　　　1）inner是在已有元素内新创建元素或文本节点 outer则是以新创建的元素或文本节点替换

　　　2）HTML创建的是元素和文本节点 会被浏览器自动解析为html标签 Text则被完全解释为文本 从输出5看出 添加的标签符号被转换为转义字符

　　　3）textContext与innerText都用来构造文本节点

  • insertAdjacentHTML/Element/Text()

　　　　insertAdjacentHTML()方法仅在element节点上有效

<body>
    <strong id="s">l</strong>
    <script>
        var ins = document.getElementById('s');
        //节点插入开标签之前
        ins.insertAdjacentHTML('beforebegin', '<span>h</span>');
        //开标签之后
        ins.insertAdjacentHTML('afterbegin', '<span>e</span>');
        //闭标签之前
        ins.insertAdjacentHTML('beforeend', '<span>l</span>');
        //闭标签之后
        ins.insertAdjacentHTML('afterend', '<span>o</span>');
        console.log(document.body.innerHTML);
        /*<span>h</span><strong id="s"><span>e</span>l<span>l</span></strong><span>o</span>*/
    </script>
</body>
  • innerText  & textContent

　　　　区别：

　　　　　　1）innerText受样式影响并会触发页面重排（reflow），textContext 不会

　　　　　　2）innerText由于受到样式影响不会返回隐藏元素（visibility: hidden/display: none）的文本，textContent会

　　　　

posted @ 2017-04-02 12:01  tt273z  阅读(1938)  评论(0)  编辑  收藏  举报