从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()调用的块，间隔很短。