<div id="test">
<span style="color:red">test1</span> test2
</div>
在JS中可以使用：
test.
innerHTML:
也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
上例中的test.innerHTML的值也就是“<span style="color:red">test1</span> test2
test.
innerText:
从起始位置到终止位置的内容, 但它去除Html标签
上例中的text.innerTest的值也就是“test1 test2”,其中span标签去除了
test.
outerHTML:
除了包含innerHTML的全部内容外, 还包含对象标签本身。
上例中的text.outerHTML的值也就是<div id="test"><span style="color:red">test1</span> test2</div>
完整示例：
<div id="test">
<span style="color:red">test1</span> test2
</div>
<a href="javascript:alert(test.innerHTML)">innerHTML内容</a>
<a href="javascript:alert(test.innerText)">inerHTML内容</a>
<a href="javascript:alert(test.outerHTML)">outerHTML内容</a>
特别说明：
innerHTML是符合W3C标准的属性，而innerText只适用于IE浏览器，因此，尽可能地去使用innerHTML，而少用innerText，如果要输出不含HTML标签的内容，可以使用innerHTML取得包含HTML标签的内容后，再用正则表达式去除HTML标签，下面是一个简单的符合W3C标准的示例：
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">无HTML,符合W3C标准</a>
注意innerHTML有自动检查语法的功能,它会把不完整的HTML代码补充完整,这点可以说是神奇,例如下面的这段脚本
<head>
<script language="javascript">
function Get(){
var tab=document.getElementById("tab")
tab.innerHTML="<table><tr>";
alert(tab.innerHTML);
}
</script>
</head>
<body>
<p id="tab" onclick="Get()">
请点我啦!!!
</p>
</body>
</html>
还有一种情况，设置的时候:
HTML:<DIV ALIGN="left" id="div"><p>hello world!!!</p>ddddd</DIV>
div.innerText = "<p>abcdef</p>";
结果为:
<DIV ALIGN="left" id="div"><p>abcdef</p></DIV>
此是对<p></p>不做HTML解析 页面直接显示为<p>abcdef</p>
div.innerHTML = "<p>abcdef</p>";
结果为:
<DIV ALIGN="left" id="div"><p>abcdef</p></DIV>
此是对<p></p>会做HTML解析 页面只显示abcdef
div.outerText = "<p>abcdef</p>";
结果为:
<p>abcdef</p>
此是对<p></p>不做HTML解析 将以前的对象标签给替换掉了,
这个时候是操纵是div本身 页面直接显示为<p>abcdef</p>
div.outerHTML = "<p>abcdef</p>";
结果为:
<p>abcdef</p>
此是对<p></p>会做HTML解析
这个时候是操纵也是div本身
页面只显示abcdef
最后,
outerText和
innerText在取得数据的时候没有区别,而在设置值的时候就有区别
请记住inner操纵的是对象里面的东西
outer操纵的是对象本身,也就是要比inner大一级吧,
innerHTML：得出调用该方法的节点下的HTML代码，但不包括该节点本身的HTML代码
outerHTML:得出调用该方法的节点及该节点下的HTML代码
分享到：
相关推荐
html js innerHTML outerHTML innerText outerText 等的区别及实例汇总
在示例中，我们可以看到，innerHTML、outerHTML、innerText、outerText的用法和区别。innerHTML和outerHTML用于获取或设置HTML元素的内容，而innerText和outerText用于获取或设置HTML元素的文本内容。 outerHTML比...
根据提供的文件信息，我们可以深入探讨三个重要的DOM属性：`innerHTML`、`innerText`以及`outerHTML`。这些属性在Web开发中非常关键，用于获取或设置元素内部的内容。接下来将详细解析这些属性的功能、用途及差异。 ...
js为我们提供了三种方法outerhtml、innerhtml和innertext,但他们之间具体怎么使用与具体的区别在哪里，可能很多人不知道吧，接下来跟着小编一起来学习innerHTML，innerText，outerHTML的用法及区别吧。
内嵌 HTML 和文本内容的获取方法 在 JavaScript 中，innerHTML 和 innerText 是两个常用的属性，它们用于获取 HTML 元素中的内容。...因此，在实际开发中，尽量使用 innerHTML 属性，以确保浏览器的兼容性。
- 使用innerText和innerHTML时需要注意浏览器兼容性，innerText主要在IE中广泛支持，其他浏览器可能需要使用textContent。 - 对于大量HTML内容的修改，innerHTML更为合适；如果只是简单修改文本，innerText更简洁。 ...
在JavaScript中，`innerHTML`, `outerHTML`, `innerText`, 和 `outerText` 是四个非常重要的属性，用于操作HTML元素的内容。下面将详细解释这些属性的用法和它们之间的区别。 1. **innerHTML** - `innerHTML` 属性...
总的来说，理解并熟练运用`innerHTML`、`innerText`（或`textContent`）和`outerHTML`能帮助开发者更高效地处理HTML文档中的内容。在实际开发中，应优先考虑兼容性和标准，适当使用正则表达式辅助处理HTML标签。
`innerHTML`、`outerHTML` 和 `innerText` 这三个属性是JavaScript中最常用的方法之一，它们分别用于获取或设置元素的HTML内容、整个元素（包括其所有子节点）的HTML代码，以及元素的纯文本内容。虽然这些方法在名称...
JavaScript中的innerHTML、outerHTML、innerText和outerText是四个用于操作HTML元素内容的属性，它们各自有不同的功能和用途。 1. innerHTML： - innerHTML允许我们获取或设置一个元素内部的HTML内容。当我们设置...
document对象中有innerHTML、outerHTML、innerText和outerText四个属性，它们之间的区别和使用方法是开发者必须掌握的知识。 首先，让我们来了解innerHTML和outerHTML这两个属性。innerHTML设置或获取标签所包含的...
JavaScript中的innerHTML、outerHTML、textContent和innerText属性是处理HTML元素内容和文本的四个关键属性，它们各有特点，适用场景也有所不同。以下是对这些属性的详细解释： 1. innerHTML属性： innerHTML属性...