JavaScript - 动态添加内容

在 web 开发中，通常需要通过 JavaScript 动态地向页面中添加内容。以下是实现此目的的常用方法：

1. 使用 innerHTML

可以使用 innerHTML 属性来添加文本或 HTML 内容到元素中。以下是一个简单的例子：

const element = document.getElementById("myElement");
element.innerHTML = "<p>通过 JavaScript 添加的内容</p>";

上述代码会在 id 为 myElement 的元素中添加一个带有文本的段落。通过 innerHTML 添加内容的好处在于可以方便地添加 HTML 内容，不过有 XSS 漏洞的风险，应该避免直接使用用户输入的内容作为 innerHTML 的值。

2. 使用 DOM API

使用 DOM API 可以更加精细地控制添加的内容。以下是一个简单的例子：

const element = document.getElementById("myElement");

const newElement = document.createElement("p");
const textNode = document.createTextNode("通过 JavaScript 添加的内容");
newElement.appendChild(textNode);

element.appendChild(newElement);

上述代码会创建一个新的带文本的段落元素，并将它添加到 id 为 myElement 的元素中。

使用 DOM API 添加内容的好处在于可以控制添加的内容和样式，同时也避免了 XSS 漏洞的风险。

3. 使用 jQuery

使用 jQuery 可以更加方便地添加内容。以下是一个使用 jQuery 添加内容的例子：

$('#myElement').append('<p>通过 JavaScript 添加的内容</p>');

上述代码会在 id 为 myElement 的元素中添加一个带有文本的段落。使用 jQuery 可以省去使用 DOM API 的繁琐代码，同时也比 innerHTML 更加安全。

总结

以上介绍了 JavaScript 中动态添加内容的三种常用方法，其中 innerHTML 方便但有安全风险，DOM API 可以更加精细地控制添加的内容，而使用 jQuery 则更加方便。具体使用时需要根据实际情况进行选择。