当使用JavaScript添加其他输入时，为什么输入的输入值会消失？

我有一个带有两个输入字段的简单表单。一个代表产品名称 还有一个是有价的。当我同时输入产品名称时 作为产品价格，单击一个按钮，再添加一个字段 对于另一个产品和价格，另一个产品字段和价格字段 已添加，但输入的输入值将被删除

如何保持输入字段中输入的值不被清除

这是我的JavaScript代码：

<script>
var total_products = 1;
function add_fields() {
    var d = document.getElementById("products_services");
    total_products++;
    d.innerHTML += "<div class=\"form-group\"><label for=\"product"+total_products+"\" class=\"col-sm-4 control-label\">Product "+total_products+"</label><div class=\"col-sm-6\"><input type=\"text\" class=\"form-control\" name=\"product"+total_products+"\" placeholder=\"Product "+total_products+"\"></div></div>";
    d.innerHTML += "<div class=\"form-group\"><label for=\"price"+total_products+"\" class=\"col-sm-4 control-label\">Price "+total_products+"</label><div class=\"col-sm-6\"><input type=\"text\" class=\"form-control\" name=\"price"+total_products+"\" placeholder=\"Price "+total_products+" (e.g. 479.59)\"></div></div>";
}
</script>

var总产品=1；
函数add_fields（）{
var d=document.getElementById（“产品和服务”）；
产品总数++；
d、 innerHTML+=“产品”+产品总数+”；
d、 innerHTML+=“价格”+产品总数+”；
}

这是我的HTML代码：

<form class="form-horizontal" action="index.php" method="post">
<div id="products_services">
  <div class="form-group">
    <label for="product1" class="col-sm-4 control-label">Product 1</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" name="product1" placeholder="Product 1">
    </div>
  </div>
  <div class="form-group">
    <label for="price1" class="col-sm-4 control-label">Price 1</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" name="price1" placeholder="Price 1 (e.g. 479.59)">
    </div>
  </div>
</div>
<div class="form-group">
  <div class="col-sm-offset-4 col-sm-6">
  <button type="button" onclick="add_fields()" class="btn btn-default">Add 1 more Product</button> <button type="submit" class="btn btn-default">Submit</button>
  </div>
</div>
</form>

产品1
价格1
再添加1个产品提交

尝试使用类似的方法，而不是添加原始HTML：

$（“”）
.attr（“id”、“myfieldid”）
.attr（“名称”、“myfieldid”）
.附于（“#TheFormYouAddTo”）；

---

您必须给您的表单提供一个id，并将其放在.appendTo（“#id”）中；但是这不应该更新所有的html。

当您将额外的html添加到

products\u services

div时，您会使它从头开始重新创建它包含的每个元素，因此输入为空

扩展元素内容的更好方法是调用

document.createElement

来创建新的元素

尝试对代码进行以下更改：

var D = document.getElementById("products_services");
var d=document.createElement('div');
D.appendChild(d);

---

您不能仅使用

innerHTML

来设置它。您需要附加新表单。 看看下面的代码

var总产品=1；
window.add_fields=函数（）{
产品总数++；
var d=document.getElementById（“产品和服务”）；
var htmlObject=document.createElement（'div'）；
var textnode=“产品”+产品总数+”；
textnode+=“价格”+产品总数+”；
htmlObject.innerHTML=textnode；
d、 appendChild（htmlObject）；
}

产品1
价格1
再添加1个产品
提交

您通过分配给

innerHTML

来重写dom。有没有办法用原始JavaScript（没有像jQuery这样的框架）保留输入的值？使用

元素。appendChild

。这里->@adeneo这很有效，正是我搜索的。谢谢：）没有jQuery标签，你也有一个简单的JS版本吗？啊，你是对的，我的错。