innerHTML、innerText、textContent兼容性

html：

<p id="area">this is a <span style="color: red;">html</span>!</p>

 

一、innerHTML

console.log(document.getElementById("area").innerHTML);

结果：

this is a <span style="color: red;">html</span>!

 

chrome	firefox	ie
√	√	√

 

 

 

二、innerText

console.log(document.getElementById("area").innerText);

结果：

this is a html!

原本只有火狐不兼容。现在也兼容了。

 

chrome	firefox	ie
√	√	√

 

 

三、textContent

console.log(document.getElementById("area").textContent);

结果：

this is a html!

和innerText一样的效果。原本火狐不兼容innerText,是用textContent的。

但是现在都可以使用。textContent只兼容ie9+。

 

chrome	firefox	ie9+	ie8
√	√	√	×

 

 

 

四、outerHTML

console.log(document.getElementById("area").outerHTML);

结果：

<p id="area">this is a <span style="color: red;">html</span>!</p>

chrome	firefox	ie
√	√	√