js如何最后填充html

在JavaScript中,向HTML文档中动态添加内容是一个常见的操作，本文将详细介绍如何在JavaScript中实现向HTML文档的最后部分填充内容的方法，希望对您有所帮助。

我们需要确定在HTML文档中的哪个位置添加内容,通常情况下，我们可以选择在body标签的最后添加内容，以下是具体的实现方法：

使用appendChild()

appendChild() 方法可以将一个新的元素添加到指定父元素的子元素列表的末尾。

创建一个新的元素：

// 创建一个新的div元素
var newDiv = document.createElement("div");
// 设置div的内容
newDiv.innerHTML = "这里是要添加的内容";

将新创建的元素添加到body的最后：

// 将新创建的div元素添加到body的最后
document.body.appendChild(newDiv);

使用appendChild() 方法非常简单，以下是完整的示例代码：

window.onload = function() {
    // 创建一个新的div元素
    var newDiv = document.createElement("div");
    // 设置div的内容
    newDiv.innerHTML = "这里是要添加的内容";
    // 将新创建的div元素添加到body的最后
    document.body.appendChild(newDiv);
};

使用insertBefore()

insertBefore() 方法可以将一个新的元素插入到指定父元素中的一个子元素之前。

创建一个新的元素：

// 创建一个新的div元素
var newDiv = document.createElement("div");
// 设置div的内容
newDiv.innerHTML = "这里是要添加的内容";

获取body的最后一个子元素：

// 获取body的最后一个子元素
var lastChild = document.body.lastChild;

将新创建的元素插入到body的最后一个子元素之前：

js如何最后填充html

// 如果body有子元素，则插入到最后一个子元素之前；否则直接添加到body
if (lastChild) {
    document.body.insertBefore(newDiv, lastChild);
} else {
    document.body.appendChild(newDiv);
}

以下是完整的示例代码：

window.onload = function() {
    // 创建一个新的div元素
    var newDiv = document.createElement("div");
    // 设置div的内容
    newDiv.innerHTML = "这里是要添加的内容";
    // 获取body的最后一个子元素
    var lastChild = document.body.lastChild;
    // 如果body有子元素，则插入到最后一个子元素之前；否则直接添加到body
    if (lastChild) {
        document.body.insertBefore(newDiv, lastChild);
    } else {
        document.body.appendChild(newDiv);
    }
};