js动态创建及移除div的方法

接下来我将为您详细讲解“JS动态创建及移除div的方法”的完整攻略。

创建Div元素

在JS中，我们可以通过createElement()方法来创建一个新的HTML元素，这也包括Div元素。下面是一个JS创建Div元素的示例。

// 创建一个Div元素
var divElement = document.createElement("div");

// 将Div元素添加到文档中的Body元素中
document.body.appendChild(divElement);

首先，我们创建了一个新的Div元素并将其存储在 divElement 变量中。接着，我们使用 appendChild() 方法将这个新创建的元素添加到文档中 body 元素的末尾。

移除Div元素

当不需要某个Div元素时，我们可以将其从文档中删除。我们可以通过removeChild()方法来操作文档中的节点元素。下面是一个JS将一个Div元素从文档中删除的示例。

// 获取要删除的Div元素
var divElement = document.getElementById("div-to-remove");

// 从其父元素中删除这个Div元素
divElement.parentNode.removeChild(divElement);

首先，我们获取到要移除的Div元素并将其存储在 divElement 变量中。接着，我们调用了 removeChild() 方法将 divElement 从其父元素中删除。

示例说明

示例1：创建一个包含文本内容的Div元素

下面的示例演示如何创建一个新的Div元素，并将其添加到文档中的 body 元素后面。

// 创建一个带有文本的Div元素
var divElement = document.createElement("div");
divElement.innerHTML = "这是一个新的Div元素！";

// 将新的Div元素添加到文档中
document.body.appendChild(divElement);

该示例创建了一个新的Div元素，将其内容设置为“这是一个新的Div元素！”，并将其添加到文档中的 body 元素后面。

示例2：使用按钮来创建和删除Div元素

下面的示例演示如何使用按钮来创建和删除Div元素。

<button onclick="createDiv()">创建Div元素</button>
<button onclick="removeDiv()">删除Div元素</button>

// 创建一个新的Div元素
function createDiv() {
    var divElement = document.createElement("div");
    divElement.innerHTML = "这是一个新的Div元素！";
    document.body.appendChild(divElement);
}

// 删除最后一个Div元素
function removeDiv() {
    var divElements = document.getElementsByTagName("div");
    var lastDivElement = divElements[divElements.length - 1];
    lastDivElement.parentNode.removeChild(lastDivElement);
}

该示例使用两个按钮调用了JavaScript函数来创建和删除Div元素。当单击第一个按钮时，将创建一个新的包含文本“这是一个新的Div元素！”的Div元素，并将其添加到文档中。当单击第二个按钮时，将查找文档中的所有Div元素，并将最后一个元素删除。