jQuery实现新增输入框并保留原有输入框值的方法

问题出在你用了innerHTML +=来添加新元素——浏览器执行这个操作时，会把#demo容器里的所有原有元素销毁后重新渲染，自然会清空之前输入的内容。改用jQuery的.append()方法就能解决，它只会把新元素追加到容器末尾，完全不影响已有元素的状态。

另外你原代码里的新输入框HTML有语法错误（属性引号没闭合），也需要修正，否则会导致输入框的name、value属性解析异常。

以下是修改后的完整代码：

HTML部分 #

<p>Availability</p>
<div id="demo">
  <div>
    <input type="date" name="avail[startdate1]" value="" min="" max="">
    <input type="range" value="" name="avail[startdate1]" min="0" max="23" oninput="this.nextElementSibling.value = this.value">
    <output>12</output><span>:00 (GMT+8) </span>
    <br>
  </div>
</div>
<input type="button" id="add" value="Add input" />

jQuery代码部分 #

$(function() {
  let num = 2;

  // 绑定添加按钮点击事件
  $('#add').click(function() {
    const newInput = `
      <div>
        <input type="date" name="avail[startdate${num}]" value="" min="" max="" />
        <input type="range" name="avail[startdate${num}]" value="" min="0" max="23" oninput="this.nextElementSibling.value = this.value">
        <output>12</output><span>:00 (GMT+8) </span>
      </div>
    `;
    // 用append追加新元素，不影响原有内容
    $('#demo').append(newInput);
    num++;
  });

  // 用事件委托处理动态添加的range输入框的mousedown事件
  $('#demo').on('mousedown', 'input[type="range"]', function() {
    window.getSelection().removeAllRanges();
  });
});

关键改动说明： #

• 替换innerHTML +=为$('#demo').append()：避免重新渲染原有元素，保留输入内容
• 修正新输入框的HTML语法：把name属性的引号正确闭合，避免属性混乱
• 改用事件委托绑定range输入框的mousedown事件：动态添加的元素也能触发该事件，不用每次添加后重新绑定

内容的提问来源于stack exchange，提问作者Edric