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

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中，我尝试转到“工具”>“ Javascript控制台”，但是没有错误。 有没有更好的方法来调试javascript，以便我可以看到错误是什么？

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

Answer 1

使用jQuery：

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

Answer 2

另一种解决方案是列出所需的所有div，然后替换样式属性（称为“可见性”）

解决方案如下：

----- 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);