温馨提示×

innerHTML和outerHTML怎么使用

小亿
122
2023-06-29 15:06:05
栏目: 编程语言

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节点。

0