Javascript删除表单输入添加到innerHTML

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

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

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

哪里this.item是我想要添加到该行的结束的代码。

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

来源

2012-01-18 Jack TC

字面上从未使用innerHTML +=，它会搞砸了一切。

insertAdjacentHTML意味着对于这些情况，并已支持，因为IE4

所以：

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

来源

2012-01-18 15:12:09 Esailija

你每天都学到新的东西...... +1 – Matt 2012-01-18 15:23:57

@马特真的，我不得不承认自从我知道这件事之后不久，这种方法非常棒，几乎和js本身一样古老，为什么它不那么知名？ – Esailija 2012-01-18 15:28:39

请参阅[本文]（http://ejohn.org/blog/dom-insertadjacenthtml/）了解IE6中insertAdjacentHTML的一些限制。并且，[MDN]（https://developer.mozilla.org/en/DOM/Element.insertAdjacentHTML）表示，直到第8版，Firefox才支持它。听起来非常有用，如果你有一个支持它的浏览器。 – jfriend00 2012-01-19 15:00:36

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

来源

2012-01-18 15:02:58 jfriend00

Javascript删除表单输入添加到innerHTML

回答

相关问题