如何使用 JavaScript 为每个列表项添加唯一图标答案

【问题标题】：How to add a unique icon to each list item with JavaScript如何使用 JavaScript 为每个列表项添加唯一图标
【发布时间】：2019-05-29 14:13:42
【问题描述】：

我的网站上有一个列表，每个列表项都有一个唯一的类名。现在我想为每个班级分配一个字体很棒的图标。这是我的html：

<ul>
    <li class="item-1"></li>
    <li class="item-2"></li>
    <li class="item-3"></li>
    <li class="item-4"></li>
</ul>

我想做的是使用 javascript，编写一些代码来为每个独特的类分配一个很棒的字体图标，这样它最终会看起来像这样：

<ul>
    <i class="far fa-route"></i><li class="item-1"></li>
    <i class="far fa-map"></i><li class="item-2"></li>
    <i class="far fa-clock"></i><li class="item-3"></li>
    <i class="far fa-calendar"></i><li class="item-4"></li>
</ul>

如您所见，我想给每个独特的职业一个不同的图标。我该怎么做呢？另外，我对 javascript 很陌生，所以如果您需要更多信息，请告诉我。

【问题讨论】：

stackoverflow.com/questions/29319682/…
您确定要在<li> 标签之前插入<i> 吗？我认为您应该将''标签附加到<li>标签，如下所示：<li class="item-.."><i class="far fa-.."></li>

标签： javascript html dom font-awesome

【解决方案1】：

创建字体真棒类的数组。获取所有lis，然后就可以使用insertBefore了。

const awesomeIcons = ["fa-route", "fa-map", "fa-clock", "fa-calendar"];

const ul = document.querySelector('ul');
const lis = ul.querySelectorAll('li');

const newlis = [...lis].forEach((li, idx) => {
  const i = document.createElement('i');
  i.className = "far " + awesomeIcons[idx];
  ul.insertBefore(i, li);
});

<ul>
  <li class="item-1">Item 1</li>
  <li class="item-2">Item 2</li>
  <li class="item-3">Item 3</li>
  <li class="item-4">Item 4</li>
</ul>

【讨论】：