在一个 div 中添加多个元素，而其他元素不会丢失它们的值

Question

当我使用添加按钮添加一个输入时，更改其值，然后添加另一个输入，容器中已经存在的输入将失去它们的值。let btn = document.getElementById('addBtn');let container = document.getElementById('container');btn.onclick = function() {  container.innerHTML += `<input type="number" max="10" min="1" value="1"><br>`;}<button id="addBtn">add element</button><div id="container"></div>

Answer 1

使用insertAdacentHTML代替+=ing 到innerHTML容器的 。这样，现有元素就不会被破坏：

let btn = document.getElementById('addBtn');

let container = document.getElementById('container');

btn.onclick = function() {

  container.insertAdjacentHTML('beforeend', `<input type="number" max="10" min="1" value="1"><br>`);

};

<button id="addBtn">add element</button>

<div id="container"></div>

innerHTML在 HTML 中读取时，更改容器的 将有效清除元素字符串中不存在的任何内容。因此， set.value不会被保留，事件侦听器也不会。

insertAdjacentHTML，另一方面，不会重新解析任何现有的子项 -它只插入相邻的 HTML，其他所有内容都单独存在。

您还可以使用createElement和 附加来创建元素appendChild，但是当有很多属性时，这有点冗长。

Answer 2

<button id="btn2">add</button>

<script>

$(document).ready(function(){

var add='<input type="text" value="hello" readonly />';

    $('#btn2').click(function(){

        $('p').append(add);

    });

});

</script>