在一个 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() {&nbsp; 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 />';&nbsp; &nbsp; $('#btn2').click(function(){&nbsp; &nbsp; &nbsp; &nbsp; $('p').append(add);&nbsp; &nbsp; });});</script>