本文详细解释了innerHTML与innerText以及outerHTML与outerText的区别。前者保留标签结构，后者仅获取纯文本内容。通过具体示例展示了不同场景下这些属性的使用效果。
innerText与innerTHML的区别。innerHTML内容包括子标签的文本自内，而innerText的内容仅包含文本不含子标签
| Code | innerText | innerHTML |
| <div>Hello world</div> | “Hello world” | “Hello world” |
| <div><b>Hello</b> world</div> | “Hello world” | “<b>Hello</b> world” |
| <div><span></span></div> | “” | “<span></span>” |
outerText与outerHTML的区别，outerText仅包含当前标签内的文本，outerHTML包含当前标签以及其子标签在内的所有文本。（仅IE和Opera支持）
| Code | outerText | outerHTML |
| <div>Hello world</div> | “Hello world” | “<div>Hello world</div>” |
| <div><b>Hello</b> world</div> | “Hello world” | “<div><b>Hello</b> world</div>” |
| <div><span></span></div> | “” | “<div><span></span></div>” |
<html><head><title>OuterText Example</title>
<style type=”text/css”>...
div.special {...}{
background-color: red;padding: 10px;
}</style><script type=”text/javascript”>...function useOuterText() ...{var oDiv = document.getElementById(“div1”);oDiv.outerText = oDiv.outerText;alert(document.getElementById(“div1”));}</script></head><body><div id=”div1” class=”special”>This is my original text</div><input type=”button” value=”Use OuterText” onclick=”useOuterText()” /></body></html>
扫一扫
488
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
