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