innnerText
innerText 属性表示一个节点及其后代的渲染文本内容
innerText获取的是纯文本值不含html标签
<span>
"ahah1"
<p>123</p>
</span>
<script>
var span = document.querySelector('span');
console.log(span.innerText);
//打印的结果为 "ahah1" 123
</script>
textContent
textContent 属性设置或返回指定节点的文本内容,以及它的所有后代。作用和innerText一样,只是浏览器兼容性不同
<span>
"ahah1"
<p>123</p>
</span>
<script>
var span = document.querySelector('span');
console.log(span.textContent);
//打印的结果为 "ahah1" 123
</script>
innnerText 和 textContent的区别
设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持
设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持
如果这个属性在浏览器中不支持,那么这个属性的类型是undefined
判断这个属性的类型 是不是undefined,就知道浏览器是否支持
兼容性
innerHTML: IE 7及以下不兼容
解决方案:
element.innerHTML == str || element.innerHTML == str + " ";
innerText:谷歌,火狐,IE8都支持
textContent:谷歌,火狐支持,IE8不支持
兼容代码
//设置任意的标签中间的任意文本内容
function setInnerText(element,text) {
//判断浏览器是否支持这个属性
if(typeof element.textContent =="undefined"){//不支持
element.innerText=text;
}else{//支持这个属性
element.textContent=text;
}
}
//获取任意标签中间的文本内容
function getInnerText(element) {
if(typeof element.textContent=="undefined"){
return element.innerText;
}else{
return element.textContent;
}
}
innerHTML
Element.innerHTML 属性设置或获取HTML语法表示的元素的后代。
innerHTML是可以设置文本内容
innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
<span>
"ahah1"
<p>123</p>
</span>
<script>
var span = document.querySelector('span');
//获取span标签的innerHTML
console.log(span.innerHTML);
// "ahah1" <p>123</p>
//设置
span.innerHTML += '<h1>我是h1标签</h1>'
</script>
innnerText和innerHTML的区别
使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的
innerHTML是可以设置文本内容
innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的
获取的时候:
innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.—获取不到标签的,文本可以获取
innerHTML才是真正的获取标签中间的所有内容
<span>
"ahah1"
<p>123</p>
</span>
<script>
var span = document.querySelector('span');
console.log(span.innerText); //"ahah1" 123
console.log(span.innerHTML); // "ahah1" <p>123</p>
</script>