Question

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

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

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

Answer 1

将createElement与appendChild一起使用而不是innerHTML： Advantages of createElement over innerHTML?

另请阅读这篇关于innerHTML disadvatages和替代品的综合文章： http://slayeroffice.com/articles/innerHTML_alternatives/ 特别是[5a] Creating Multiple Elements

部分

在你的情况下，它可能是：

<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>

另见http://jsfiddle.net/bvLba/

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

1 个答案: