使用 document.body.insertBefore() 函数在网页中插入新的元素

在 JavaScript 中，我们可以使用 document.body.insertBefore() 函数来在网页中插入新的元素。此函数的作用是在指定的一个已有元素之前插入一个新的元素。

语法

document.body.insertBefore(newNode, referenceNode);

其中:

• newNode：代表要插入的新元素。
• referenceNode：代表已有元素，新元素会被插在其之前。

示例

下面是一个简单的例子，演示如何使用 document.body.insertBefore() 函数将一个新的 <div> 元素插入到一个指定元素的前面：

// 创建一个新的 div 元素
var newDiv = document.createElement("div");

// 为新的 div 元素添加内容
newDiv.innerHTML = "<p>新的元素被添加到此处</p>";

// 找到要插入的位置，即已有的元素
var referenceNode = document.getElementById("existingElement");

// 插入新的 div 元素
document.body.insertBefore(newDiv, referenceNode);

以上代码会将一个新的 <div> 元素插入到 id 为 existingElement 的已有元素之前。

返回值

document.body.insertBefore() 函数没有返回值，它只是直接在 DOM 树上修改了当前的网页内容。

总结

document.body.insertBefore() 函数是在 JavaScript 中很常用的一个函数，它可以让我们在网页中方便地插入新的元素。使用这个函数的重点是找到合适的已有元素，以便新元素可以被正确地插入到指定的位置。