如何使用javascript動態地添加和移除Div標記

我將如何簡單移除並實時添加div？而且我已經在頁面上手動創建了div，所以即使在第一次運行該函數時，它也會被刪除。在div被稱爲 'testElem'如何使用javascript動態地添加和移除Div標記

我想：

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

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

但腳本不能正常工作。我嘗試在第一個remDiv之後放置一個「alert」來測試。但它甚至沒有通過那裏。代碼中斷。在鉻我試着去工具> Javascript控制檯，但沒有錯誤。有沒有更好的方式來調試JavaScript，所以我可以看到錯誤是什麼？

我只是試圖做到這一點，所以它會刪除div中的內容，每次函數運行時內容不會翻倍。每次都不一樣。使用jQuery

來源

2011-09-05 brybam

：

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

來源

2011-09-05 07:31:03 Samich

另一種解決方案是讓你需要所有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將被放置

來源

2011-09-05 07:37:05 xsari3x

'display'更往往比'visibility'有用的，因爲設置'display'到'none'將從流刪除元素，而不僅僅是不渲染它。 – icktoofay

removeChild需要從要刪除的div的父級調用。

，所以你會想這樣的代碼：

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

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

來源

2011-09-05 07:50:59 yoavmatchulsky

如何使用javascript動態地添加和移除Div標記

回答

相關問題