Javascript 如何在用户单击“添加”按钮时添加文本字段？

当用户单击“添加”按钮时，会出现一个新行，我使用以下代码执行此操作：

function generateRow() {
    var d = document.getElementById("add");
    d.innerHTML += "<p><input type='text' name='items'>";
}

函数生成器ow（）{
var d=document.getElementById（“添加”）；
d、 innerHTML+=“”；
}

---

但是，当我在“添加的文本”字段中键入一些数据，然后再次单击“添加”按钮时，我在另一行中键入的数据将消失。有人能告诉我一个更好的JavaScript解决方案吗。我不介意jQuery是否工作得更好。提前谢谢

将createElement与appendChild而不是innerHTML一起使用：

还可以阅读这篇关于innerHTML缺陷和替代方案的全面文章： 特别是这一部分

在您的情况下，可能是：

<script type="text/javascript">
function generateRow() {
   var d = document.getElementById("add");
   var p = document.createElement("p");
   var input = document.createElement("input");
   input.setAttribute('type', 'text');
   input.setAttribute('name', 'items');
   p.appendChild(input);
   d.appendChild(p);
}
</script>

函数生成器ow（）{
var d=document.getElementById（“添加”）；
var p=document.createElement（“p”）；
var输入=document.createElement（“输入”）；
input.setAttribute（'type'，'text'）；
input.setAttribute（'name'，'items'）；
p、 追加子项（输入）；
d、 儿童（p）；
}

---

另请参见

您每次都得到相同的元素，只是替换了它的内容。您需要在DOMStephen中添加一个新元素。感谢您的解释，我已经从zlatin获得了解决方案。谢谢你的时间！所以当我调用函数时，应该是这样的，对吗

可能是这样，是的。这不是您调用函数的方式的问题（您可以保持与原始函数相同的方式）。问题是，当你使用innerHtml时，每次你添加一个新的输入元素时，浏览器都会重新创建所有的输入元素，所以这会导致你观察到的行为。啊，好的，我明白你想说的了。谢谢，我会尝试一下，然后回来。是的，它很有效，非常感谢，我是一个新手，所以谢谢你花时间向我解释：）不用担心，欢迎：）