innerHTML和outerHTML怎么使用

innerHTML和outerHTML是DOM屬性，用于獲取或設(shè)置HTML元素的內(nèi)容。
innerHTML屬性用于獲取或設(shè)置HTML元素的內(nèi)容。如果用于獲取，它將返回一個字符串，包含了該元素的所有子元素和文本內(nèi)容。如果用于設(shè)置，它將替換元素的內(nèi)容為指定的HTML代碼。
示例：
獲取元素的內(nèi)容：
```javascript
var element = document.getElementById("myElement");
var content = element.innerHTML;
console.log(content);
```
設(shè)置元素的內(nèi)容：
```javascript
var element = document.getElementById("myElement");
element.innerHTML = "

This is a new paragraph.

";
```
outerHTML屬性用于獲取或設(shè)置HTML元素及其內(nèi)容的完整HTML代碼。如果用于獲取，它將返回一個字符串，包含了該元素及其子元素的完整HTML代碼。如果用于設(shè)置，它將替換整個元素為指定的HTML代碼。
示例：
獲取元素的完整HTML代碼：
```javascript
var element = document.getElementById("myElement");
var html = element.outerHTML;
console.log(html);
```
設(shè)置元素的內(nèi)容和屬性：
```javascript
var element = document.getElementById("myElement");
element.outerHTML = "

This is a new div.

";
```
需要注意的是，使用innerHTML和outerHTML屬性會重新解析和渲染元素及其子元素。如果頻繁使用這兩個屬性來修改元素的內(nèi)容，可能會導(dǎo)致性能問題。所以在修改大量內(nèi)容時，最好使用其他方法，例如創(chuàng)建和插入新的DOM節(jié)點。