JS 将元素附加到正文 - Javascript

在Web开发中，我们经常需要添加元素到文档中。使用 JavaScript，我们可以很容易地做到这一点。在本篇文章中，我们将介绍几种方法将元素附加到正文中

1. appendChild()

appendChild() 方法将一个元素添加到指定容器的子元素列表的末尾。下面是使用 appendChild() 的示例代码：

var container = document.getElementById("container");
var newElement = document.createElement("div");
newElement.innerText = "这是新添加的元素";
container.appendChild(newElement);

在上面的代码中，我们首先获取父容器元素 container，并创建一个新的元素 newElement。然后我们给新元素添加文本，最后将 newElement 作为一个子元素添加到 container 中。

2. insertBefore()

insertBefore() 方法向指定容器的子元素列表中添加一个元素，该元素位于指定的参考元素之前。下面是使用 insertBefore() 的示例代码：

var container = document.getElementById("container");
var newElement = document.createElement("div");
newElement.innerText = "这是新添加的元素";
var referenceElement = document.getElementById("referenceElement");
container.insertBefore(newElement, referenceElement);

在上面的代码中，我们首先获取父容器元素 container，并创建一个新的元素 newElement。然后我们给新元素添加文本，并获取一个参考元素 referenceElement。最后，将 newElement 插入到 container 中 referenceElement 前面。

3. innerHTML

innerHTML 属性设置或返回指定元素的内容，包括 HTML 标记和文本内容。如果直接给 innerHTML 赋值为一个 HTML 标记字符串，它会自动创建一个新的元素并将其插入到元素中。下面是使用 innerHTML 的示例代码：

var container = document.getElementById("container");
container.innerHTML += '<div>这是新添加的元素</div>';

在上面的代码中，我们首先获取父容器元素 container。然后直接通过 innerHTML，将一个包含新元素 HTML 标记的字符串附加到容器中。

总结

我们介绍了三种方法来将元素附加到正文中：appendChild()、insertBefore() 和 innerHTML。这些方法都是用来向 HTML 文档中添加新元素的，具有不同的使用场景，需要根据实际情况选择使用。