介绍
在前端开发中，我们常常需要动态地添加、修改或者删除 DOM 元素。而 innerHTML 是一个广为人知的属性，它可以让我们直接修改元素的 HTML 内容。但是，使用 innerHTML 会有一些潜在的安全风险，如跨站脚本攻击（XSS）。此外，由于 innerHTML 会重新解析并重建整个 DOM 树，因此它还可能导致性能问题。
那么，有没有一种更安全且更高效的替代方案呢？本文将介绍两种替代方案： textContent 和 insertAdjacentHTML。
textContent
textContent 是一个只读属性，它返回指定元素及其后代节点的文本内容。与 innerHTML 不同的是，textContent 返回的是文本而不是 HTML，因此它不会触发浏览器的解析和构建过程。这也意味着，使用 textContent 不会引起 XSS 攻击，并且性能更好。
<div id="myDiv">Hello, world!</div>
const myDiv = document.querySelector('#myDiv');
myDiv.textContent = '你好，世界！';上面的代码会将 myDiv 元素的文本内容从 "Hello, world!" 改为 "你好，世界！"。
insertAdjacentHTML
insertAdjacentHTML 是一个方法，它可以在指定元素的相对位置插入 HTML 字符串。与 innerHTML 不同的是，insertAdjacentHTML 只会解析并构建被插入的 HTML 片段，而不是整个文档。这也意味着，使用 insertAdjacentHTML 不会引起 XSS 攻击，并且性能更好。
insertAdjacentHTML 方法接受两个参数：
position: 插入的位置，可以是以下四个值之一："beforebegin"：在当前元素前面插入 HTML"afterbegin"：在当前元素内部、第一个子节点前插入 HTML"beforeend"：在当前元素内部、最后一个子节点后插入 HTML"afterend"：在当前元素后面插入 HTML
html: 要插入的 HTML 字符串
<div id="myDiv">Hello, world!</div>
const myDiv = document.querySelector('#myDiv');
myDiv.insertAdjacentHTML('afterend', '<p>你好，世界！</p>');上面的代码会在 myDiv 元素后面插入一个段落，并设置其内容为 "你好，世界！"。
总结
innerHTML 的确很方便，但由于潜在的安全和性能问题，我们应该尽量避免使用它。相比之下，textContent 和 insertAdjacentHTML 更加安全和高效，因此应该优先考虑使用它们。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
------------------ --- ------------------
-------
------
---- ----------------- ------------
------- ------------------------------------
------- ------------------------- -------------
--------
-------- ------------ -
----- ----- - ---------------------------------
----------------- - ---------
-
-------- ------------ -
----- ----- - ---------------------------------
------------------------------------ -----------------
-
---------
-------
-------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/29967