Question

我如何简单地删除并实时添加div？并且我已经在页面上手动创建了div，因此即使第一次运行该函数它也将被删除。 div被称为'testElem'

我正在尝试：

            var remDiv = document.getElementById('testElem');
            document.body.removeChild(remDiv);

             var divTag = document.createElement("div");
            divTag.id = "testElem";
            document.body.appendChild(divTag);

但脚本无效。我尝试在第一个remDiv之后放置一个“警报”进行测试。但它甚至没有超过那里。代码中断了。在Chrome中，我尝试使用工具＆gt; Javascript控制台，但没有错误。有没有更好的方法来调试javascript所以我可以看到错误是什么？

我只是想这样做，所以每次运行该函数时它都会删除div中的内容，因此内容不会加倍。每次都不一样。

Answer 1

使用jQuery：

$('#testElem').remove();
$('body').append($('<div id="testElem"></div>'));

Answer 2

另一种解决方案是列出您需要的所有div 然后交替名为visibility

的样式属性

解决方案如下：

<强> ----- ------ HTML

<div id="div1" style="visibility:hidden;"  >
<div id="div2" style="visibility:hidden;"  >
<div id="div3" style="visibility:hidden;"  >
.....

<强> ----- JS --------

//to Hide
var x=document.getElementById("divToHide");
x.style.visibility="visible"; 
//to show 
ar x=document.getElementById("divToShow");
x.style.visibility="hidden";

此解决方案还可以更好地控制div的放置位置

Answer 3

需要从要删除的div的父级调用

removeChild。

所以你想要这段代码：

var remDiv = document.getElementById('testElem');
var parent = remDiv.parentNode;
parent.removeChild(remDiv);

var divTag = document.createElement("div");
divTag.id = "testElem";
parent.appendChild(divTag);

如何使用javascript动态添加和删除Div标签

3 个答案: