innerHTML和outerHTML怎么使用

innerHTML和outerHTML是DOM属性，用于获取或设置HTML元素的内容。
innerHTML属性用于获取或设置HTML元素的内容。如果用于获取，它将返回一个字符串，包含了该元素的所有子元素和文本内容。如果用于设置，它将替换元素的内容为指定的HTML代码。
示例：
获取元素的内容：
```javascript
var element = document.getElementById("myElement");
var content = element.innerHTML;
console.log(content);
```
设置元素的内容：
```javascript
var element = document.getElementById("myElement");
element.innerHTML = "

This is a new paragraph.

";
```
outerHTML属性用于获取或设置HTML元素及其内容的完整HTML代码。如果用于获取，它将返回一个字符串，包含了该元素及其子元素的完整HTML代码。如果用于设置，它将替换整个元素为指定的HTML代码。
示例：
获取元素的完整HTML代码：
```javascript
var element = document.getElementById("myElement");
var html = element.outerHTML;
console.log(html);
```
设置元素的内容和属性：
```javascript
var element = document.getElementById("myElement");
element.outerHTML = "

This is a new div.

";
```
需要注意的是，使用innerHTML和outerHTML属性会重新解析和渲染元素及其子元素。如果频繁使用这两个属性来修改元素的内容，可能会导致性能问题。所以在修改大量内容时，最好使用其他方法，例如创建和插入新的DOM节点。