js中innerhtml的用法

原创

ithorizon 8个月前 (09-14) 阅读数 153 #Javascript

### JavaScript中innerHTML的用法

在JavaScript中，`innerHTML`是一个非常有用的属性，它能够获取或设置HTML元素中的内容。下面将通过几个例子来详细解释`innerHTML`的用法。

#### 1. 获取元素内容

使用`innerHTML`可以获取HTML元素内部的HTML内容。

**示例代码：**

```html

这是一个段落。

```

将上面的代码包裹在`

`标签中：


<!-- HTML结构 -->
<div id="myDiv">
  <p>这是一个段落。</p>
</div>
<script>
  // JavaScript代码
  var myDivContent = document.getElementById('myDiv').innerHTML;
  console.log(myDivContent);
</script>

#### 2. 设置元素内容

同样，我们也可以使用`innerHTML`来替换元素内部的HTML内容。

**示例代码：**

```html

```

代码包裹在`

`标签中：


<!-- HTML结构 -->
<div id="myDiv"></div>
<script>
  // JavaScript代码
  document.getElementById('myDiv').innerHTML = '<p>这是一段新内容。</p>';
</script>

请注意，在上面的例子中，为了正确输出HTML标签，我们使用了HTML实体编码（`<p>`代替`

`）。

#### 3. 动态创建内容

`innerHTML`还允许我们动态创建HTML元素并插入到页面中。

**示例代码：**

```html

```

代码包裹在`

`标签中：


<!-- HTML结构 -->
<div id="myDiv"></div>
<script>
  // JavaScript代码
  var content = '<p>段落一</p><p>段落二</p>';
  document.getElementById('myDiv').innerHTML = content;
</script>

#### 注意事项

- 使用`innerHTML`设置的HTML内容会替换掉元素内原有的所有内容。

- 在设置内容时，如果内容包含HTML标签，它们会被解析为HTML元素，而不是文本。

- 对于包含用户输入的HTML内容，使用`innerHTML`大概存在平安风险，出于这大概引起跨站脚本攻击（XSS）。