從DOM中刪除元素

Question

我使用此方法來逃避客戶端的HTML代碼字符串：

function escapeHTML(str)
{
   var div = document.createElement('div');
   var text = document.createTextNode(str);
   div.appendChild(text);
   return div.innerHTML;
}; 

我有點擔心內存泄漏，因為我正在創建DOM元素而不是破壞它。 該頁面非常Ajax，並且很少刷新，因此可能會有數百次調用該方法而沒有頁面重新加載，這意味着這些對象將堆積起來，從而減慢DOM的數量（例如使用jQuery）

我試圖使用document.removeChild(div) ，但IE給出了一個錯誤“htmlfile：無效的參數。”

有任何想法嗎？

謝謝，安德烈

Answer 1

您需要在元素本身上調用removeChild ：

function escapeHTML(str) {
   var div = document.createElement('div');
   var text = document.createTextNode(str);
   div.appendChild(text);
   var escapedHTML = div.innerHTML;
   div.removeChild(text);
   return escapedHTML;
}

需要記住的一點是，這個解決方案在某些瀏覽器中存在怪癖 （例如處理newlines =“\\ n”）。 在Prototype.js中，我們明確地檢查了一些這些怪癖並適當地調整邏輯。

當然，不用說你應該使用特征檢測 ，而不是瀏覽器嗅探;）

每次調用函數時，您也不需要創建新元素。 只需將其存放在封閉物中即可。 例如：

var escapeHTML = (function(){

  var div = document.createElement('div');
  var text = document.createTextNode('');

  div.appendChild(text);

  return function(str) {
    text.data = str;
    return div.innerHTML;
  };
})();

如果您采用這種方法並永久保留元素，您可能還會考慮在頁面卸載時清除它（即null ），以防止可能的泄漏。

不幸的是，僅注冊卸載事件處理程序會阻止許多瀏覽器中的快速導航 （也稱為頁面緩存）。 大多數JS庫已經為了清理目的而觀察到該事件，所以如果你正在使用它（例如Prototype.js，jQuery，YUI），你不應該擔心它 - 無論如何都會禁用頁面緩存。

否則，您可能希望重新考慮您的選項，或者始終在運行時創建元素，或者完全使用不同的解決方案（例如，基於String.prototype.replace的解決方案）：

function escapeHTML(str) {
  return str.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
}

哦，最后，你不需要放置“;” 在函數聲明之后; 它是函數表達式 ，建議以分號結束:)

Answer 2

如果你加載了jQuery，你可以使用remove方法 。

Answer 3

DOM：

var node = document.getElementById('node_to_delete');
node.parentNode.removeChild(node);

jQuery的：

$('#node_to_delete').remove();

Answer 4

IIRC你不應該關心，因為JS是垃圾收集。 如果這是一個巨大的交易，你可以嘗試解析通過setTimeout()調用的塊，間隔很短。