Javascript onclick更改HTML的内容

当用户单击蓝色按钮时，我正在添加新的div，但每次用户单击按钮时，整个html的内容都会消失，我需要一个解决方案。 此外，是否可以向其添加动画

这里是演示只需按下蓝色按钮，键入一些东西，然后再次点击蓝色按钮

https://jsfiddle.net/61tbq4q6/2/

这是html部分：

<input type="button" id="ebookParts" value="&#xf067;" class="custBut">

<div id="myContainerDiv">

</div>

这是JS：

var i = 1;
$( "#ebookParts" ).click(function() {
      var container = document.getElementById("myContainerDiv");
    var html = document.getElementById('myContainerDiv').innerHTML;
    html = html + "<div class=\"col-sm-12\">"
    + "<div class=\"form-group\">"
    + "<div class=\"col-sm-6\"><label>Name</label><input class=\"form-control\" type=\"text\" name=\"display_name[]\"></div>"
    + "<div class=\"col-sm-2\"><label>Part</label><input class=\"form-control\" type=\"text\" name=\"part[]\" value=" + i + "></div>"
    + "<div class=\"col-sm-2\"><label>Pages between</label><input class=\"form-control\" type=\"text\" name=\"pages[]\"></div>"
    + "<div class=\"col-sm-2\"><label>price</label><input class=\"form-control\" type=\"text\" name=\"price[]\"></div>"
    + "</div>"
    + "</div>";
    container.innerHTML= html;
    i++;
   return false;
});

var i=1；
$（“#电子书部件”）。单击（函数（）{
var container=document.getElementById（“myContainerDiv”）；
var html=document.getElementById（'myContainerDiv'）.innerHTML；
html=html+“”
+ ""
+“姓名”
+“部分”
+“页面之间”
+“价格”
+ ""
+ "";
container.innerHTML=html；
i++；
返回false；
});

如果你说问题在于用户手动输入的内容正在消失，那是因为你在销毁这些输入，并在执行

container.innerHTML=html

时用新输入替换它们。您对

var html=…

的原始分配仅捕获实际属性，而不是JS属性

如果要使用HTML附加新DOM元素，同时保留旧内容，则需要使用而不是

。innerHTML

通过这种方式，您不必使用现有的DOM，将其转换为HTML标记，向其中添加更多HTML，并用从HTML生成的新DOM元素替换旧的DOM元素，而只需从HTML创建新的DOM元素，并将它们添加到需要的位置

var i = 1;
$( "#ebookParts" ).click(function() {
    var container = document.getElementById("myContainerDiv");

    var html = "<div class=\"col-sm-12\">"
    + "<div class=\"form-group\">"
    + "<div class=\"col-sm-6\"><label>Name</label><input class=\"form-control\" type=\"text\" name=\"display_name[]\"></div>"
    + "<div class=\"col-sm-2\"><label>Part</label><input class=\"form-control\" type=\"text\" name=\"part[]\" value=" + i + "></div>"
    + "<div class=\"col-sm-2\"><label>Pages between</label><input class=\"form-control\" type=\"text\" name=\"pages[]\"></div>"
    + "<div class=\"col-sm-2\"><label>price</label><input class=\"form-control\" type=\"text\" name=\"price[]\"></div>"
    + "</div>"
    + "</div>";

    // The "beforeend" parameter inserts the new content inside the
    // container after the existing content.
    container.insertAdjacentHTML("beforeend", html);

    i++;
   return false;
});

var i=1；
$（“#电子书部件”）。单击（函数（）{
var container=document.getElementById（“myContainerDiv”）；
var html=“”
+ ""
+“姓名”
+“部分”
+“页面之间”
+“价格”
+ ""
+ "";
//“beforeend”参数将新内容插入
//现有内容之后的容器。
container.insertAdjacentHTML（“beforeed”，html）；
i++；
返回false；
});

这是因为您得到的是html，而不是更改它，然后在页面中再次插入。复制html时，不会复制已经传入输入的值。如果只需要添加一次div，则需要使用.appendChild（）方法，还需要document.createElement（）

。然后在添加div之前检查“if”

var isAdded=false;
$( "#ebookParts" ).click(function() {
if(!isAdded){
//your code
}
});

---

你说的失踪是什么意思？这不是真的！我的意思是输入值正在删除，我将在second@squint你能再检查一下吗？谢谢。这正是我要找的。稍微细化一下可能有助于OP更好地理解。