在每个阵列上添加图标答案

【问题标题】：Adding icon on each array在每个阵列上添加图标
【发布时间】：2019-03-19 10:22:34
【问题描述】：

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

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 必须是唯一的注释

【问题讨论】：

input.setAttribute("id", "menu-item"); 在 HTML 文档中，id 必须是唯一的 - 否则会发生奇怪的事情
由于我的代理，我看不到图像

标签： javascript jquery html arrays

【解决方案1】：

您可以使用 menu-list 的 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>

【讨论】：

【解决方案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>

【讨论】：

【解决方案3】：

元素 id 在您的 DOM 上必须是唯一的，否则会获取第一个。

您可以使用 input 元素更改 id 选择器

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

【讨论】：