如何为数组生成的每个Input元素添加后置图标？

Hey，我看了你这段代码，发现问题出在图标绑定的位置不对——你现在每次循环都把图标加到#menu-item这个固定元素后面，结果所有图标都堆在一起，而不是跟着对应的Input走。下面给你两种修正方案，都能实现每个Input右侧紧跟箭头图标的效果：

方案一：用容器包裹Input和图标（原生JS） #

这种方式能确保Input和图标是一个整体，后期样式调整也更方便：

// 建议把变量名Array改成itemArray，避免和内置构造函数冲突
const itemArray = ['选项1', '选项2', '选项3'];
const menuList = document.getElementById('menu-list');

for (let i = 0; i < itemArray.length; i++) {
  // 创建一个容器div来装Input和图标
  const inputContainer = document.createElement('div');
  inputContainer.classList.add('input-with-icon'); // 自定义类，方便控制样式

  // 创建Input元素
  const input = document.createElement('input');
  input.type = 'text';
  input.classList.add('item-choice'); // 这里修正了你原来的class拼写错误（item-choie → item-choice）
  input.value = itemArray[i];
  // 如果需要给Input加唯一ID，可以这么写：
  // input.id = `input-${i}`;

  // 创建图标元素
  const arrowIcon = document.createElement('i');
  arrowIcon.classList.add('fa', 'fa-arrow-circle-right');

  // 把Input和图标放进容器，再将容器添加到列表中
  inputContainer.appendChild(input);
  inputContainer.appendChild(arrowIcon);
  menuList.appendChild(inputContainer);
}

方案二：jQuery方式直接追加图标 #

如果你习惯用jQuery开发，这种写法更简洁：

const itemArray = ['选项1', '选项2', '选项3'];

for (let i = 0; i < itemArray.length; i++) {
  // 创建Input元素
  const $input = $('<input>', {
    type: 'text',
    class: 'item-choice',
    value: itemArray[i],
    id: `input-${i}` // 给每个Input加唯一ID，避免冲突
  });
  // 创建图标元素
  const $icon = $('<i>', {
    class: 'fa fa-arrow-circle-right'
  });

  // 把Input和图标依次添加到#menu-list
  $('#menu-list').append($input).append($icon);
  // 如果你想让它们成为一个整体，也可以用wrap包裹：
  // $input.wrap('<div class="input-with-icon"></div>').after($icon);
}

重要提醒：ID唯一性 #

正如你提到的，DOM元素的ID必须唯一！如果你的业务需要给Input或其他元素加ID，一定要通过循环索引（比如input-${i}）或者其他唯一标识来生成ID，绝对不能让多个元素共用同一个ID，否则会导致后续的DOM操作、事件绑定等出现异常。

这样调整后，就能完美实现你想要的「Input →(icon)」效果啦～

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