Javascript删除表单输入并添加到innerHTML

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

我想做的是在标记中添加另一个相同类型的元素。我的目标是IE9，不使用任何框架。我正在使用：

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

其中

this.item

是我要添加到行末尾的代码

---

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

您需要添加单个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);

---

绝对不要使用

innerHTML+=

，它会把一切都搞砸

适用于这些情况，自IE4以来一直得到支持

因此：

---

document.getElementById（“contents”）.insertAdjacentHTML（“beforeend”，this.item）

@Matt true，我不得不承认我知道这一点的时间不长。这个方法非常棒，几乎和js本身一样古老，为什么它不那么出名呢？请参阅IE6中insertAdjacentHTML的一些限制。而且，他说Firefox直到v8才支持它。如果你有一个支持它的浏览器，听起来很有用。另外，我想知道你是否知道有一个与此相反的方法，可以从DOM对象中删除字符串？非常感谢你的回答，我认为这是一个非常常见的错误。