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

最新推荐文章于 2022-04-18 18:45:40 发布

weixin_30580341

最新推荐文章于 2022-04-18 18:45:40 发布

阅读量625

点赞数 1

原文链接：http://www.cnblogs.com/qimeng/p/6658698.html

版权

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>

输出：

<div id="a"><i>AAA</i></div>
<strong>changed</strong>
<div id="c">cc</div>
<div id="d">dd</div>
<strong>bold</strong>

总结：

　　　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会

转载于:https://www.cnblogs.com/qimeng/p/6658698.html

weixin_30580341

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
向Dom中添加元素与文本节点的属性和方法

inner/outerHTML,inner/outerText,textContent　　　　这些属性由js字符串创建，向Dom中添加节点。<body> <div id="a">aaa</div> <div id="b"></div> <div id="c"></div&...
复制链接

扫一扫