innerHTML与outerHTML有什么区别？ - 打野赵怀真 - 沸点 - 掘金

7月前

innerHTML与outerHTML有什么区别？
`innerHTML` 和 `outerHTML` 是 DOM 中两个常用的属性，它们的主要区别在于操作的范围和内容。

### innerHTML

- **定义**：`innerHTML` 属性用于获取或设置一个元素的 HTML 内容，包括该元素内的所有子元素和文本。
- **使用场景**：常用于动态更新某个元素内部的内容，而不会影响该元素本身。
- **示例**：

```html
<div id="myDiv">Hello <strong>World</strong>!</div>
<script>
// 获取 innerHTML
const content = document.getElementById('myDiv').innerHTML;
console.log(content); // 输出: Hello <strong>World</strong>!

// 设置 innerHTML
document.getElementById('myDiv').innerHTML = 'New Content';
</script>
```

### outerHTML

- **定义**：`outerHTML` 属性用于获取或设置一个元素及其所有内容的 HTML，包括该元素自身。
- **使用场景**：适用于替换整个元素及其内容。
- **示例**：

```html
<div id="myDiv">Hello <strong>World</strong>!</div>
<script>
// 获取 outerHTML
const outerContent = document.getElementById('myDiv').outerHTML;
console.log(outerContent); // 输出: <div id="myDiv">Hello <strong>World</strong>!</div>

// 设置 outerHTML
document.getElementById('myDiv').outerHTML = '<div id="newDiv">New Element</div>';
</script>
```

### 关键区别总

展开

今天学到了

赞过