在 JavaScript 中添加新元素的代码

在 JavaScript 中，可以通过以下方式添加新的元素到 DOM（文档对象模型）中：

使用 appendChild 方法

该方法用于将一个节点添加到另一个节点的末尾。示例代码如下：

var parent = document.getElementById("parent-element");
var child = document.createElement("div");
parent.appendChild(child);

在上述代码中，我们首先通过 getElementById 方法获取了父元素节点，并将其存储在变量 parent 中。接着，我们使用 createElement 方法创建一个新的子元素节点 child，最后通过 appendChild 方法将子节点添加到父节点末尾。

使用 insertBefore 方法

该方法用于在某个节点之前插入一个新节点。示例代码如下：

var parent = document.getElementById("parent-element");
var child = document.createElement("div");
var existingChild = document.getElementById("existing-child");
parent.insertBefore(child, existingChild);

在上述代码中，我们首先获取父元素节点，并创建一个新的子元素节点 child。接着，我们通过 getElementById 方法获取一个现有的节点 existingChild，最后通过 insertBefore 方法将新的子节点 child 插入到 existingChild 节点之前。

使用 innerHTML 属性

该属性可用于动态更新某个元素的内容，包括添加新的元素。示例代码如下：

var parent = document.getElementById("parent-element");
parent.innerHTML += "<div class='child-element'>New child element</div>";

在上述代码中，我们使用 getElementById 方法获取父元素节点，并将一个新的子元素的 HTML 标记字符串赋给 innerHTML 属性，以将其添加到父节点中。

以上是在 JavaScript 中添加新元素的三种常见方法。需要注意的是，在使用内联 JavaScript 时，应该尽可能地避免使用 innerHTML 属性，以避免潜在的安全漏洞。而在现代的开发中，更推荐使用框架或库，如 React、Vue、jQuery 等，以实现更加简洁、优雅的 DOM 操作。