JavaScript字符串HTML转义后需清理吗？DOM添加疑问解析

嘿，这两个HTML转义方案我都实际用过，刚好可以帮你解答这两个疑问：

先回顾下你提到的两个方案 #

方案一（利用临时<p>元素）：

function escapeHTML(str){ var p = document.createElement("p"); p.appendChild(document.createTextNode(str)); return p.innerHTML; }

方案二（简化版，利用Option构造函数）：

function escapeHTML(str){ return new Option(str).innerHTML; }

疑问1：上述方案会将<p>元素及关联文本实际添加到DOM中吗？ #

完全不会。这两个方案都是在内存中创建临时元素，从来没有把它们挂载到当前页面的DOM树里：

• 方案一里的document.createElement("p")只是在内存中生成了一个<p>元素对象，没有调用任何类似document.body.appendChild(p)这样的方法把它添加到页面DOM中；appendChild(document.createTextNode(str))也只是把文本节点添加到这个内存中的<p>元素内部，和页面实际DOM无关。
• 方案二的new Option(str)同样是在内存中创建了一个<option>元素实例，它从来没有被添加到任何<select>或者页面DOM里，只是利用了它的innerHTML属性会自动转义特殊字符的特性。

疑问2：若仅需保存转义后的字符串，是否需要调用removeChild()或进行其他清理操作？ #

不需要任何额外清理。因为这些临时创建的元素（<p>或<option>）都没有被挂载到DOM树，它们只是普通的JavaScript对象。当escapeHTML函数执行完毕后，这些临时对象就失去了引用，JavaScript的垃圾回收机制会自动回收它们占用的内存，完全不需要手动调用removeChild或者其他清理方法。

其实这两个方案的核心都是利用浏览器原生的HTML转义逻辑，避免自己手动写正则处理各种特殊字符（比如除了<>，还有&、"这些也会被自动转义），既高效又不容易出错。

内容的提问来源于stack exchange，提问作者paulsm4