JavaScript中使用innerHTML的缺点

HTML代表超文本标记语言，通过HTML我们可以设计网页区块。HTML是一种前端标记语言，用于构建前端页面的内容。这意味着我们可以构建网页的结构。

通过HTML，我们可以设计任何网站的内容。这意味着我们可以为任何网站创建标题、按钮、段落、页眉、页脚、链接等。

示例

让我们尝试理解如何实现一个程序：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Basic of HTML</title>
</head>
<body>
   <h1>H1 Heading </h1>
   <p>This is a paragraph </p>
   <a href = "#">Link</a>
   <br><br>
   <button>Button</button>
   <footer>This is a footer</footer>
</body>
</html>

在上面的程序中，我们创建了一个标题、段落、链接、换行标签、按钮和页脚。正如你在上面的程序中看到的，我们可以通过以下方式编写HTML程序。

innerHTML

innerHTML就像每个HTML元素的一个属性。这意味着，假设我们在HTML中创建了一个div标签，在div标签内创建了paragraph标签，那么我们可以说paragraph标签是innerHTML，而整个div是outerHTML。

此外，我们还可以使用JavaScript中的innerHTML通过其标签名称、ID或类名来获取任何标签的属性。

以下是显示innerHTML的代码片段：

<div><p>Hello world</p><div>

在上面的代码片段中，你可以说整个div标签是outerHTML，而整个p标签是innerHTML。

示例

让我们尝试用一个合适的例子来理解：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Basic of HTML</title>
</head>
<body>
   <div>Hello <strong>HTML</strong></div>
</body>
</html>

在上面的程序中，你可以看到，最初我们创建了一个div标签，在div标签内创建了strong标签。所以div标签将是outerHTML，而div标签内写入的内容就是innerHTML。

innerHTML的缺点

以下是使用innerHTML的缺点：

innerHTML速度慢

innerHTML速度慢，因为当我们在代码中使用innerHTML属性时，它允许我们使用JavaScript语言进行更改。它非常慢，因为即使我们必须再次解析内容，innerHTML也已经解析了内容，这就是它需要时间的原因。

附加到任何DOM元素的事件处理程序都会被保留

当我们使用事件处理程序时，事件处理程序不会自动附加到innerHTML创建的新元素。要更改这一点，我们必须跟踪事件处理程序并手动将它们附加到新元素。

这意味着首先，我们必须通过innerHTML获取元素属性，然后才能将其附加到新元素。

示例

让我们尝试用一个合适的例子来理解：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Basic of HTML</title>
</head>
<body>
   <p id= 'demo'>Hello</p>
   <button onclick="Change()">Change</button>
   <script>
      function Change()
      {
         let p = document.getElementById('demo');
         p.innerHTML = '<span>Hello World</span>';
      }
   </script>
</body>
</html>

正如你在上面的程序中看到的，我们首先获取已经保留的元素，然后手动将它们附加到新的span元素。你可以看到事件处理程序之前和之后输出截图中的变化。

HTML的其他一些缺点是：

到处都进行了替换

当使用innerHTML属性进行修改时，所有DOM节点都必须再次解析和创建。

无法追加innerHTML

在JavaScript中，“+=”通常用于追加。但是，当使用innerHTML追加到HTML标签时，整个标签会被重新解析。

示例

<spam id="tp">Tutorials Point</p>
subject = document.getElementById('#tp')

// The whole "tp" tag is reparsed
subject.innerHTML += '<span> Tutorix </span>'

破坏文档

innerHTML不提供正确的验证，因此可以使用任何有效的HTML代码。这有可能破坏JavaScript文档。甚至可以使用损坏的HTML，这可能会导致意外问题。

用于跨站点脚本攻击

网页中的文本、图像或元素可能会被黑客或恶意用户用来更改文本或数据，并通过其他HTML元素标签显示一些不同的、不需要的或具有威胁性的内容。这会导致敏感和机密信息发生更改。

更新于：2022年8月26日

3000+ 次浏览

启动您的职业生涯

通过完成课程获得认证

开始
广告