前端开发：追加子元素的几种方法

在前端开发中，我们经常需要动态地向 DOM 中追加子元素。这篇文章将介绍几种追加子元素的方法，包括使用原生 JavaScript 和 jQuery。

使用原生 JavaScript 追加子元素

1. appendChild()

appendChild() 方法可以将一个节点作为最后一个子节点插入到另一个节点的子节点列表的末尾。

const parent = document.getElementById("parent");
const child = document.createElement("div");
parent.appendChild(child);

2. insertBefore()

insertBefore() 方法可以在指定的子节点之前插入新的子节点。

const parent = document.getElementById("parent");
const newChild = document.createElement("div");
const refChild = document.getElementById("refChild");
parent.insertBefore(newChild, refChild);

使用 jQuery 追加子元素

1. append()

append() 方法可以将指定的内容插入到被选元素的最后一个子元素的结尾处。

$("#parent").append("<div></div>");

2. prepend()

prepend() 方法可以将指定的内容插入到被选元素的第一个子元素的前面。

$("#parent").prepend("<div></div>");

总结

本文介绍了使用原生 JavaScript 和 jQuery 追加子元素的方法。其中，原生 JavaScript 提供了 appendChild() 和 insertBefore() 两种方法，而 jQuery 则提供了 append() 和 prepend() 两种方法。开发者可以根据实际需求选择合适的方法进行子元素的追加操作。

总的来说，对于小规模的 DOM 操作，使用原生 JavaScript 可能更加轻量级和高效；而在大规模的项目中，使用 jQuery 进行 DOM 操作会更加方便快捷。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13410