JS添加删除DIV的简单实例

重述的JS添加删除DIV的简单实例如下：

JS的奇妙世界：轻松实现DIV的添加与删除

在网页开发中，我们经常需要动态地添加或删除HTML元素，比如DIV。今天，我将通过一个简单的实例，展示如何使用JavaScript轻松地完成这一任务。这个例子由两部分组成：一个用于添加DIV的函数，另一个用于删除DIV的函数。让我们一起看看。

添加DIV函数

我们创建一个函数`addDiv`，它接受两个参数：宽度（w）和高度（h）。

如果页面已经存在一个名为“divCell”的DIV，我们首先删除它。

然后，我们创建一个新的DIV元素，并为其设置各种样式属性，如位置、大小、背景颜色等。这个DIV将被添加到页面的body部分。

这个函数的代码大致如下：

```javascript

function addDiv(w, h) {

deleteDiv(); // 如果存在同ID的div，先删除

var myDiv = document.createElement("div");

myDiv.id = "divCell"; // 设置ID

myDiv.style.position = "absolute"; // 设置位置为绝对定位

// ... 设置其他样式属性，如大小、背景颜色等

document.body.appendChild(myDiv); // 将新DIV添加到body

}

```

删除DIV函数

接下来，我们创建一个`deleteDiv`函数，用于删除ID为“divCell”的DIV。如果页面中存在这个DIV，我们就将其从父元素中删除。

这个函数的代码很简单：

```javascript

function deleteDiv() {

var myDiv = document.getElementById("divCell");

if (myDiv != null) {

myDiv.parentNode.removeChild(myDiv);

}

}

```

总结

以上就是使用JavaScript添加和删除DIV的简单实例。通过这两个函数，你可以根据需要动态地在网页上创建和删除DIV元素。希望这个例子能给你提供一些启示和参考。如果你对SEO和网络推广有兴趣，不妨关注狼蚁SEO，我们将分享更多实用的技巧和知识。记得多多支持我们的分享和狼蚁SEO网站哦！希望你在网页开发的道路上越走越远！