点击添加嘉宾按钮时输入框内容丢失的解决方法咨询

嘿，这个问题我之前也碰到过，根源就在你用的innerHTML +=上！当你用这种方式添加新元素时，浏览器会把guestWrap容器里的所有现有内容重新解析一遍，生成全新的DOM元素——这就相当于把之前的输入框都删掉重造了一遍，里面填的内容自然就没了。

下面给你两种简单的修复方案，都能保留现有输入内容同时新增输入框：

方案一：用jQuery的append方法（推荐，和你现有代码风格一致） #

直接把innerHTML +=换成jQuery的append()方法，它会在容器末尾直接插入新元素，完全不会触动已有的内容：

$('#addGuest').click(function() {
  var count = $('.guestName').length;
  // 用append替代innerHTML +=，避免重建现有DOM
  $('#guestWrap').append('<div class="formField guestName"><input type="text" name="guest' + count + '" placeholder="嘉宾姓名" /></div>');
});

append()方法不会重新渲染容器内的现有元素，所以之前输入框里的内容会原封不动地保留下来。

方案二：原生JavaScript实现（不用jQuery的话可选） #

如果更倾向于原生JS，也可以通过创建元素再添加的方式，避开innerHTML的坑：

document.getElementById('addGuest').addEventListener('click', function() {
  var count = document.querySelectorAll('.guestName').length;
  // 创建新的外层div
  var newGuestField = document.createElement('div');
  newGuestField.className = 'formField guestName';
  // 给div添加输入框
  newGuestField.innerHTML = '<input type="text" name="guest' + count + '" placeholder="嘉宾姓名" />';
  // 添加到容器末尾
  document.getElementById('guestWrap').appendChild(newGuestField);
});

这里用createElement创建新元素，再通过appendChild添加到容器，同样不会影响现有输入框的状态。

不管用哪种方案，核心思路都是避免重新渲染现有DOM元素，只在容器末尾追加新的输入框组件，这样就能完美保留用户已经输入的内容啦！

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