Javascript 添加列表项并不是添加所有innerHTML

作为我正在进行的一个学习项目的一部分，我遇到了一个奇怪的javascript/html问题。所讨论的部分是一个简单的待办事项列表，除了一件事之外，它工作得非常好。该程序将成功获取用户输入的文本，将其添加到新列表项并将其插入无序列表，但仅向第一个元素添加一个X（对于我尚未添加的移除函数）

此外，如果您在浏览器检查器中进行检查，两个新的li都有“a”元素，其中的X在其中，但在两个li（或更多li，具体取决于）中的a元素上悬停时，它们都“指向”第一个li上的一个且唯一的“a”元素

有谁能解释一下我做错了什么，这样我就可以修复它，并在将来避免这种情况？为什么不在每个新li中单独添加“a”元素

我在下面包含了一个JSFIDLE链接：

 const li = document.createElement('li');
  // add li class
  li.className = 'list-item';
  // append text node containing user input to li item
  li.appendChild(document.createTextNode(taskList.value));
  // create 'a' element to list and add classes/html
  const link = document.createElement('a');
  link.className = 'delete-item';
  link.innerHTML = '<i class="fa fa-remove"></i>';

  // append 'a' element to li
  li.appendChild(link);
  document.querySelector('.list-items').append(li);

const li=document.createElement（'li'）；
//添加li类
li.className='列表项'；
//将包含用户输入的文本节点附加到li项
li.appendChild（document.createTextNode（taskList.value））；
//创建“a”元素以列出和添加类/html
const link=document.createElement（'a'）；
link.className='删除项'；
link.innerHTML=''；
//将“a”元素附加到li
李.儿童(链接);；
document.querySelector（“.list items”）.append（li）；

---

这是可行的，但你的风格让它复杂化了。看这里：

我将

位置：绝对

从

.container.row2.删除到doList.list items.list items.delete item

您需要小心使用css属性。您的所有元素都已正确添加，但它们放置在完全相同的位置：）

编辑：请再次查看以上链接： X现在在没有浮动的情况下对齐：右

---

您的X仍然定位为

absolute

，但列表项具有

位置：relative

，这解决了问题：）

您的javascript代码正常工作，这是一个CSS问题

您的

.delete item

类有一个

位置：绝对

属性，使所有链接堆叠在同一位置。使用

float:right

更改

position:absolute

，并删除

top

和

right

属性：

.container.row2.to doList.list items.list item.delete item{
浮动：对；
光标：指针；
}

这将解决问题，并保持您的链接在同一位置

---

编辑：如果您不想使用

float:right

，请参阅下面的@AdamKniec-answer，通过修改父元素的CSS提供另一种可能性。

来源请？谢谢，我已将绝对位置更改为float:right，现在可以使用了。我可以用什么来代替float：在这种情况下，对吗？我们有更多来自Flexbox的优雅选择，我想我站在我的立场上，在这个例子中，

float:right

是正确的选择，它阻止使用Flexbox仅仅是为了在右边放置链接。不是最新的并不一定意味着不好的实践。位置：绝对在那里使用，所以我们可以简单地相对定位列表项，而不是使用丑陋的浮点。更好的解决方案，谢谢！至于复杂的CSS，我也在努力学习SASS。可能是嵌套这些有点太多了！太好了：）我很高兴能帮上忙。好样的luckI对链接进行了编辑。看一看。您的X现在已正确定位