Javascript删除表单输入添加到innerHTML答案

【问题标题】：Javascript deleting form input adding to innerHTMLJavascript删除表单输入添加到innerHTML
【发布时间】：2012-02-13 07:12:28
【问题描述】：

我在使用表单时遇到了 javascript“innerHTML”函数的问题。我一直在向表单添加更多选项（并将它们以数组的形式发送到服务器，例如 foo[] ）。问题是，如果用户按下向表单添加另一个元素以添加另一个选项，则他们之前选择的选项将被删除。

我想要发生的只是在标签内添加另一个相同类型的元素。我的目标是 IE9，不使用任何框架。我正在使用：

document.getElementById("contents").innerHTML += this.item;

this.item 是我要添加到行尾的代码。

我想知道的是，递归遍历我要添加的代码树以创建节点树，然后使用 appendChild 是最好的方法，还是有更好的方法？

【问题讨论】：

标签： javascript innerhtml

【解决方案1】：

绝对不要使用innerHTML +=，它会搞砸一切。

insertAdjacentHTML 适用于这些情况，并且从 IE4 开始就受支持

所以：

document.getElementById("contents").insertAdjacentHTML( "beforeend", this.item )

【讨论】：

@Matt 是的，我不得不承认我知道这一点不久。这个方法很棒，几乎和 js 本身一样古老，为什么鲜为人知？
请参阅this article，了解 IE6 中 insertAdjacentHTML 的一些限制。而且，MDN 表示 Firefox 直到 v8 才支持它。如果您有支持它的浏览器，这听起来非常有用。
另外，我想知道您是否知道是否有与此相反的情况，可以从 DOM 对象中删除一串文本？
非常感谢您的回答，我认为这是一个非常常见的错误。

【解决方案2】：

您需要添加单独的 DOM 对象，而不是像您正在做的那样添加到 innerHTML。

您的代码document.getElementById("contents").innerHTML += this.item; 所做的是将innerHTML 的内容作为字符串获取（不包括已输入到表单元素中的内容），添加到字符串的末尾，然后将其设置回来。它不仅会弄乱表单元素，还会弄乱所有事件处理程序，因为它会破坏并重新创建作为父“内容”的子元素的所有 DOM 元素。

这是一个典型的例子，说明当父级包含其他对象时使用 innerHTML 是不好的。如果您只是想添加到 innerHTML 内容的末尾，您应该创建自己的 DOM 元素并将它们附加到内容的末尾。以下是如何在没有该问题的情况下附加一些简单文本的方法：

var span = document.createElement("span");
span.innerHTML = this.item;
document.getElementById("contents").appendChild(span);

【讨论】：