在 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 程序。
内部 HTML
内部 HTML 就像每个 HTML 元素的属性一样。这意味着，假设我们在 HTML 中创建了一个 div 标签，并且在 div 标签内，我们创建了段落标签，那么我们可以说段落标签是内部 HTML，而整个 div 是外部 HTML。
此外，我们可以在 JavaScript 中使用 innerHTML 通过使用 is't 标签名称、id 或类名来获取任何标签的属性。
以下是显示内部 HTML 的代码片段 -
<div><p>Hello world</p><div>
在上面的代码片段中，你可以说整个 div 标签是外部 HTML，整个 p 标签是内部 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> <div>Hello <strong>HTML</strong></div> </body> </html>
在上面的程序中，正如您最初看到的，我们创建了一个 div 标签，并且在 div 标签内创建了 strong 标签。因此，div 标签将是外部 HTML，而 div 标签内写入的任何内容都是内部 HTML。
innerHTML 的缺点
以下是使用内部 HTML 的缺点 -
内部 HTML 很慢
内部 HTML 很慢，因为当我们在代码中使用内部 HTML 属性时，它允许我们使用 JavaScript 语言进行更改。它非常慢，因为内部 HTML 已经解析了内容，即使我们必须再次解析内容，这也是它需要时间的原因。
附加到任何 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')
// 整个"tp"标签被重新解析
subject.innerHTML += '<span> Tutorix </span>'
破坏文档
InnerHTML 不提供适当的验证，因此可以使用任何有效的 HTML 代码。这有可能破坏 JavaScript 文档。甚至可以使用损坏的 HTML，这可能会导致意外问题。
用于跨站点脚本
黑客或恶意用户可以使用网页中的文本和图像或元素来更改文本或数据，并通过其他 HTML 元素标签显示一些不同的不受欢迎或威胁性内容。这会导致敏感和机密信息的更改。
