JS innerHTML用法|极客笔记

JS innerHTML用法

1. 介绍

innerHTML是JavaScript中一个常用的属性，它用于改变HTML元素的内容。通过使用innerHTML，我们可以通过JavaScript动态地修改网页的内容，包括文字、标签、样式等。本文将详细介绍使用innerHTML的相关知识和示例代码。

2. 基本语法

innerHTML属性可以应用在HTML元素上，通过获取或设置该属性的值，来改变元素的内容。其基本语法如下所示：

element.innerHTML

其中，element表示要操作的HTML元素，innerHTML是该元素的属性。

3. 获取元素的内容

我们首先来看如何使用innerHTML获取HTML元素的内容。例如，假设有一个包含文字的<p>元素：

<p id="myParagraph">这是一个段落。</p>

我们可以使用下面的代码来获取该元素的内容：

let paragraph = document.getElementById("myParagraph");
let content = paragraph.innerHTML;
console.log(content);

运行结果：

这是一个段落。

4. 修改元素的内容

除了获取元素的内容，innerHTML还能够用于修改元素的内容。接下来我们将演示如何使用innerHTML来改变HTML元素的内容。

4.1 修改文字内容

下面的示例展示如何使用innerHTML来修改一个元素的文字内容。我们假设有一个<p>元素，其内容如下：

<p id="myParagraph">这是一个段落。</p>

我们可以使用以下代码将文字内容修改为”这是一个新的段落。”：

let paragraph = document.getElementById("myParagraph");
paragraph.innerHTML = "这是一个新的段落。";

运行结果：

这是一个新的段落。

4.2 插入HTML标签

除了修改文字内容，innerHTML还可以用于插入HTML标签。我们可以通过将HTML代码作为字符串赋值给innerHTML属性来插入标签。下面的示例展示了如何使用innerHTML插入一个<strong>标签：

let paragraph = document.getElementById("myParagraph");
paragraph.innerHTML = "这是一个 <strong>重要的</strong> 段落。";

运行结果：

这是一个 <strong>重要的</strong> 段落。

在上述示例中，我们使用了一个<strong>标签来突出文字内容。

4.3 清空元素的内容

可以将innerHTML属性设置为空字符串来清空一个元素的内容。假设有一个包含内容的<div>元素，我们可以通过以下代码将其内容清空：

let div = document.getElementById("myDiv");
div.innerHTML = "";

运行结果：<div>元素的内容被清空。

5. 注意事项

使用innerHTML时需要注意一些事项：

5.1 潜在的安全风险

由于innerHTML属性具有解析HTML的功能，因此在使用innerHTML时要注意潜在的安全风险。如果将用户提供的数据直接插入innerHTML中，可能会导致XSS（跨站脚本攻击）漏洞。为了防止这种攻击，应该对用户输入进行适当的验证和过滤。

5.2 重新绑定事件

使用innerHTML修改元素内容后，需要重新绑定事件。因为innerHTML会重写元素的内容，元素原本绑定的事件会失效。所以，在修改元素内容后，如果需要继续使用旧有的事件，需要重新绑定事件。

6. 示例代码

下面是一个将innerHTML应用于改变元素内容的完整示例：

<!DOCTYPE html>
<html>
<body>

<h2>innerHTML示例</h2>

<p id="myParagraph">这是一个段落。</p>

<button onclick="changeContent()">点击修改内容</button>

<script>
function changeContent() {
  let paragraph = document.getElementById("myParagraph");
  paragraph.innerHTML = "这是一个新的段落。";
}
</script>

</body>
</html>

点击”点击修改内容”按钮后，段落的文字内容会被修改为”这是一个新的段落。”。