[JS]textContent、innerHTML、innerText比较及TextNode使用
一、共同点
1）都可以用来设置和获取元素内容
2）插入时都会将容器中原有内容全部覆盖
语法：
1 var div=document.querySelector("div"); 2 //******设置******** 3 4 //element.innerHTML既可以插入文本，也可以插入标签，且会对标签进行解析 5 div.innerHTML="innerHTML" 6 div.innerHTML="<b>innerHTML</b>" 7 8 //element.textContent和element.innerText不会对文本中的标签进行解析 9 div.textContent="<b>innerHTML-2</b>" 10 div.innerText="<Strong>innerHTML-2</Strong>" 11 12 //******获取******** 13 console.log(div.innerText) 14 console.log(div.textContent) 15 console.log(div.innerHTML)
二、不同点
1）textContent的输出样式和html写的样式保持一致
2）innerTEXT会根据html元素类型，输出对应内容（换行与否）
3）innerHTML会输出与html写的样式一致的标签内容
三、插入文本且不覆盖元素内原有内容的方法
1 var div=document.querySelector("div"); 2 var textNode=document.createTextNode("需要插入的文本")； 3 div.appendChild(textNode)
