Javascript单击更改HTML的内容

Javascript onclick change content of HTML

本文关键字：HTML 单击 Javascript      更新时间：2023-09-26

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

如果你说问题是用户手动输入的内容正在消失，那是因为在执行container.innerHTML = html时，你正在销毁这些输入并用新的输入替换它们。您对var html = ...的原始赋值只捕获实际属性，而不是JS属性。

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

通过这种方式，您只需从HTML创建新的DOM并将其添加到您想要的位置，而不是获取现有的DOM，将其转换为HTML标记，向其中添加更多的HTML，并用从HTML生成的新DOM元素替换旧的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;
});

这是因为你得到了html，而不是更改它，然后再次插入到你的页面中。当您复制html时，您不会复制已经传入输入的值。相反，您需要使用.appendChild（）方法，并且还需要document.createElement（）

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

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