如何使用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);