1、功能讲解:
innerHTML 设置或获取位于对象起始和结束标签内的 HTML
outerHTML 设置或获取对象及其内容的 HTML 形式
innerText 设置或获取位于对象起始和结束标签内的文本
outerText 设置(包括标签)或获取(不包括标签)对象的文本
2、示例
<html>
<head>
<title>Demo</title>
<style><!--
body {font-family:"宋体";color="blue";font-size="9pt"}
--> </style>
[removed]
//.inn
JavaScript中的innerHTML、outerHTML、innerText和outerText是四个与HTML元素内容操作紧密相关的属性，它们在处理网页元素的文本和HTML结构时具有不同的作用和特点。
1. innerHTML：
- innerHTML允许我们获取或设置一个元素内部的HTML内容，包括开始和结束标签之间的所有内容。当你设置innerHTML时，它会解析提供的字符串为HTML，这意味着你可以插入新的HTML结构。例如，如果你将一个包含HTML的字符串赋值给innerHTML，浏览器会将其解析并替换当前元素的内容。
- 示例：
```javascript
element.innerHTML = '<b>Hello, World!</b>';
```
- 这个例子会将`element`的子元素替换为粗体的"Hello, World!"。
2. outerHTML：
- outerHTML不仅包含了元素内部的HTML，还包括了元素自身的标签。这个属性可以用于获取或设置一个元素及其所有内容的完整HTML表示。设置outerHTML会替换掉整个元素，包括其自身。
- 示例：
```javascript
var elementCopy = element.outerHTML;
element.outerHTML = '<div class="newClass">' + element.innerHTML + '</div>';
```
- 这会将`element`替换为一个新的`div`元素，保留原有的innerHTML内容，并添加了"class='newClass'"。
3. innerText：
- innerText是IE特有的属性，但在现代浏览器中也被广泛支持。它用于获取或设置元素内部的纯文本，不包含任何HTML标签。当设置innerText时，所有HTML标签都将被忽略，只保留文本。
- 示例：
```javascript
element.innerText = 'New Text';
```
- 这会删除`element`内的所有HTML，并将其内容更改为纯文本"New Text"。
4. outerText：
- outerText与innerText类似，但同时也包括元素自身的标签。设置outerText会替换整个元素，包括其自身，但只保留文本内容，不保留HTML结构。
- 注意：outerText在标准的W3C规范中并未定义，但在某些版本的IE浏览器中可用。
这些属性在处理网页内容时非常有用，特别是在动态生成和修改页面内容的场景下。由于innerText是IE特有属性，为了跨浏览器兼容性，通常推荐使用innerHTML配合正则表达式来清除HTML标签，实现类似innerText的功能。例如：
```javascript
var plainText = element.innerHTML.replace(/<[^>]*>/g, '');
```
这将使用正则表达式移除innerHTML中的所有HTML标签，得到纯文本内容。
innerHTML和outerHTML关注的是HTML结构，innerText和outerText则更多关注文本内容。在开发时，理解这些属性的差异和适用场景，能够帮助我们更高效地操作网页元素。
