Question

我在用户点击蓝色按钮时添加新的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;
});

Answer 1

如果您说问题是用户手动输入到输入中的任何内容正在消失，那是因为当您执行container.innerHTML = html时，您正在销毁这些输入并将其替换为新输入。您对var html = ...的原始分配仅捕获实际属性，而不是JS属性。

如果要在保留旧内容的同时使用HTML追加新DOM元素，则需要执行的操作是使用.insertAdjacentHTML而不是.innerHTML。

这样，您可以简单地创建新的DOM，而不是使用现有的DOM，将其转换为HTML标记，向其添加更多HTML，并将旧的DOM元素替换为从HTML生成的新元素。 HTML并将它们添加到您想要的位置。

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;
});

Answer 2

这是因为你获得了html，而不是更改它，然后再次插入你的页面。复制html时，不要复制已在输入中传递的值。而不是你需要使用.appendChild（）方法，你还需要document.createElement（）

Answer 3

如果您只需要添加div一次。然后在添加div之前使用“if”进行检查。

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

Javascript onclick更改HTML的内容

3 个答案: