Javascript 如何使用innerHTML创建新字段，同时保留以前的字段值？如何完全执行。再次调用前单击？

我发誓，这个问题可能在别的地方，但我找不到！！！ 但这里是这样的：

Javascript:

var update = $("#CalcUpdate");
var content = document.getElementById("CalcContent");

update.click(function() { //update
    content.innerHTML += "<div style='display: none' class='CalcOn'><input type='field' value='' class='CalcName'/>";
    obj = $(".CalcOn");
    obj.slideToggle(400,function() {
        obj.removeClass();
});

var更新=$（“#计算更新”）；
var content=document.getElementById（“CalcContent”）；
更新。单击（函数（）{//update
content.innerHTML+=“”；
obj=$（“.CalcOn”）；
对象滑动切换（400，函数（）{
对象removeClass（）；
});

}))

HTML:

更新

这背后有两个问题：

每次创建新字段时，都会删除以前的字段值。（我不知道为什么，它应该添加新的innerHTML行，为什么以前的值会删除？）

如果我快速单击“更新”，函数会重叠，我不知道如何使一个在另一个之前以这种格式执行。我见过其他问题，但它们都涉及使用两个函数或其他我不想做的事情

---

您正在使用jquery，所以请使用它！：）以下是我如何更新您的脚本：

var$update=$（“#计算更新”）；
var$content=$（“#CalcContent”）；
$update。单击（函数（）{//update
var$obj=$（“”）；
$obj.appendTo（$content.slideToggle（400，function（）{$obj.removeClass（）}）；
});

注意事项：

• 使用jquery查找内容，类似于查找更新区域的方式
• 使用jquery构造新对象（

  $obj

  ），而不是使用innerHTML并添加字符串
• 使用jquery

  append

  /

  appendTo

  将

  $obj

  添加到

  $content

  而不是使用innerHTML
• 直接使用$obj执行

  滑动切换

  （因此，无需查找）。这修复了快速单击时出现的操作时间/顺序问题

---

如果我理解正确，请尝试此操作，这将保留您填写的任何输入并添加更多内容：

update.click(function() { //update
var showinput = $("<div style='display: none' class='CalcOn'><input type='field' value='' class='CalcName'/>").insertBefore(content);

    obj = $(".CalcOn");
    obj.slideToggle(400,function() {
        obj.removeClass();
    });

update。单击（函数（）{//update
var showinput=$（“”）。插入之前（内容）；
obj=$（“.CalcOn”）；
对象滑动切换（400，函数（）{
对象removeClass（）；
});

var $update = $("#CalcUpdate");
    var $content = $('#CalcContent');

$update.click(function() { //update
        var $obj = $("<div style='display: none' class='CalcOn'><input type='field' value='' class='CalcName'/>");
    $obj.appendTo($content).slideToggle(400, function() { $obj.removeClass() });
});

update.click(function() { //update
var showinput = $("<div style='display: none' class='CalcOn'><input type='field' value='' class='CalcName'/>").insertBefore(content);

    obj = $(".CalcOn");
    obj.slideToggle(400,function() {
        obj.removeClass();
    });