在每个数组上添加图标

Question

我为数组创建了一个输入元素，我想在每个数组之后添加一个图标。 示例代码：

for (i = 0; i < Array.length; i++){
    var input = document.createElement("INPUT");
    input.setAttribute("type", "text");
    input.setAttribute("class","item-choie")
    input.setAttribute("value", Array[i]);
    $('#menu-item').after('<i class="fa fa-arrow-circle-right"></i>');
    document.getElementById('menu-list').appendChild(input); 
}

预期输出：

输入

->（图标）

编辑：感谢id的注释必须唯一

Answer 1

元素ID在您的dom上必须唯一，否则第一个元素会被获取。

通过元素更改选择器

$(input).after('<i class="fa fa-arrow-circle-right"></i>');

Answer 2

您必须为要添加的每个输入更改id选择器，否则选择器将获取第一个匹配的实例，并在其后添加图标。

var Array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]
for (i = 0; i < Array.length; i++) {
  var input = document.createElement("INPUT");
  input.setAttribute("type", "text");
  var s = 'menu-item' + i;
  input.setAttribute("id", s);
  input.setAttribute("class", "item-choie")
  input.setAttribute("value", Array[i]);
var id = '#menu-item' + i;
  $(id).after('<i class="fa fa-arrow-circle-right"></i>');
  document.getElementById('menu-list').appendChild(input);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menu-list"></div>

Answer 3

您可以使用菜单列表的 innerHTML 属性。

请注意： id 属性在文档中必须是唯一的。

for (i = 0; i < 5; i++){
  var input = document.createElement("INPUT");
  input.setAttribute("type", "text");
  input.setAttribute("id", "menu-item" +i);
  input.setAttribute("class","item-choie")
  input.setAttribute("value", i);
  document.getElementById('menu-list').appendChild(input); 
  document.getElementById('menu-list').innerHTML += '<i class="fa fa-arrow-circle-right"></i>';
}

.item-choie{
  display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

<div id="menu-list"></div>