在前端开发中，我们经常需要向 HTML 元素中添加内容。而在实现这个功能时，有两种主要的方法：使用 innerHTML 属性和 appendChild() 方法。本文将探讨这两种方法的不同之处，以及何时应该使用哪种方法。
innerHTML
innerHTML 是一个 HTML 元素对象的属性，它定义了元素的内容。我们可以通过 innerHTML 属性来读取或设置元素的内容。例如：
const element = document.getElementById('myElement');
element.innerHTML = '<p>Hello World!</p>';上述代码会将 ID 为 myElement 的元素的内容设置为 <p>Hello World!</p>。
如果我们想将新的内容添加到元素的末尾，我们可以使用 innerHTML += 操作符。例如：
element.innerHTML += '<p>More content!</p>';
运行上述代码后，myElement 元素的内容会变成：
<p>Hello World!</p> <p>More content!</p>
虽然 innerHTML 很方便，但是它的使用也存在一些潜在的问题。其中最大的一个问题是安全性。如果我们直接将用户输入的内容放入 innerHTML 中，那么就可能会导致 XSS（跨站脚本攻击）漏洞。因此，我们应该尽量避免在 innerHTML 中插入动态内容。
appendChild()
appendChild() 是 DOM 中 Element 类的一个方法。它接受一个节点对象作为参数，并将该节点添加到当前元素的子节点列表中。例如：
const element = document.getElementById('myElement');
const newElement = document.createElement('p');
const textNode = document.createTextNode('More content!');
newElement.appendChild(textNode);
element.appendChild(newElement);上述代码会在 ID 为 myElement 的元素中添加一个新的段落元素，其内容为 More content!。
appendChild() 方法非常安全，因为它只接受节点对象作为参数，而不是字符串。这意味着我们可以通过 JavaScript 动态地创建节点并添加它们，而不必担心 XSS 漏洞。
哪种方法更好？
两种方法各有优缺点，我们应该根据具体情况选择使用哪种方法。
当需要添加一大块 HTML 代码时，innerHTML 很方便。但是在添加动态内容时，我们应该使用 appendChild()。这样可以避免 XSS 漏洞，并提高代码的健壮性。
如果我们需要频繁地添加一小块 HTML 代码，则可以使用 innerHTML +=。但是需要注意的是，这种情况下应该尽量避免添加动态内容。
示例代码
以下是一个示例，演示如何使用 appendChild() 方法向页面中添加内容：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
-------
------
---- -----------------
--------
----- --- - ---------------------------------
----- -- - ----------------------------
----- --------- - ---------------------------------
--------------------------
--------------------
----- -- - ----------------------------
----- --------- - ----------------------------------
--------------------------
--------------------
---------
-------
-------以下是一个示例，演示如何使用 innerHTML += 向页面中添加内容：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
-------
------
---- -----------------
--------
----- --- - ---------------------------------
------------- -- ---------------
------------- -- ----------------
---------
-------
-------无论使用哪种方法，我们都应该注意代码的安
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/24424