结论
innerHTML 返回标签内部嵌套的子元素的所有(HTML标签 + 文本内容content)。innerText 返回标签内部嵌套的子元素的文本内容content。outerHTML 返回(标签本身 + 嵌套的子元素)的所有(HTML标签 + 文本内容content)。outerText 返回(标签本身 + 嵌套的子元素)的文本内容content。
outerText属性firefox并不支持，但chrome支持。
innerHTML和innerText的区别：
- innerHTML会对获取到的内容做解析，将标签进行解释。
- innerText会将读取到的一切视作文本(包括"
hello
这样包含HTML标签的字符串")。
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>innerHTML, innerText, outerHTML, outerText的区别</title>
</head>
<body>
<div id="div1">这是div1</div>
<span id="span1">这是span1</span>
<div id="div2">
这是div2
<img src="" alt="">
<p>div2里的p <span>div2里的span</span></p>
</div>
<script>
var div1 = document.getElementById("div1");
var span1 = document.getElementById("span1");
var div2 = document.getElementById("div2");
</script>
<button onclick="console.log('\n[innerHTML]\n' + div1.innerHTML + '\n' + span1.innerHTML + '\n' + div2.innerHTML);">innerHTML</button>
<button onclick="console.log('\n[innerText]\n' + div1.innerText + '\n' + span1.innerText + '\n' + div2.innerText);">innerText</button>
<button onclick="console.log('\n[outerHTML]\n' + div1.outerHTML + '\n' + span1.outerHTML + '\n' + div2.outerHTML);">outerHTML</button>
<button onclick="console.log('\n[innerText]\n' + div1.outerText + '\n' + span1.outerText + '\n' + div2.outerText);">outerText</button>
</body>
</html>
test(chrome)
[innerHTML]
这是div1
这是span1
这是div2
<img src="" alt="">
<p>div2里的p <span>div2里的span</span></p>
[innerText]
这是div1
这是span1
这是div2
div2里的p div2里的span
[outerHTML]
<div id="div1">这是div1</div>
<span id="span1">这是span1</span>
<div id="div2">
这是div2
<img src="" alt="">
<p>div2里的p <span>div2里的span</span></p>
</div>
[innerText]
这是div1
这是span1
这是div2
div2里的p div2里的span
test(firefox)
code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div>
<p id="para">Hello World</p>
</div>
<script>
var e = document.getElementById("para");
</script>
<button onclick="e.innerHTML = '<h1>innerHTML</h1>';">innerHTML</button>
<button onclick="e.innerText = '<h1>innerText</h1>';">innerText</button>
</body>
</html>