如何为JavaScript元素添加FontAwesome图标？Todo应用删除按钮改造咨询

首先要确保你的页面已经引入了FontAwesome的样式文件（本地引入或官方提供的方式均可），之后需要修改两处创建删除按钮的代码，替换原来的叉号文本为FontAwesome垃圾桶图标：

1. 修改现有任务项的删除按钮初始化代码 #

找到脚本中初始化现有<li>元素的循环部分，把创建叉号文本节点的代码替换为创建FontAwesome的<i>元素：

原代码：

var txt = document.createTextNode('\u00D7');
span.appendChild(txt);

替换为：

var icon = document.createElement('i');
icon.className = 'fa fa-trash';
icon.setAttribute('aria-hidden', 'true');
span.appendChild(icon);

2. 修改新增任务时的删除按钮创建代码 #

在newElement()函数里，同样替换创建叉号文本的代码：

原代码：

var txt = document.createTextNode('\u00D7');
span.appendChild(txt);

替换为：

var icon = document.createElement('i');
icon.className = 'fa fa-trash';
icon.setAttribute('aria-hidden', 'true');
span.appendChild(icon);

修改后的完整脚本参考 #

var myNodelist = document.getElementsByTagName('LI');
var i;
for (i = 0; i < myNodelist.length; i++) {
  var span = document.createElement('SPAN');
  // 替换为垃圾桶图标
  var icon = document.createElement('i');
  icon.className = 'fa fa-trash';
  icon.setAttribute('aria-hidden', 'true');
  span.className = 'close';
  span.appendChild(icon);
  myNodelist[i].appendChild(span);
}

var close = document.getElementsByClassName('close');
var i;
for (i = 0; i < close.length; i++) {
  close[i].onclick = function () {
    var div = this.parentElement;
    div.style.display = 'none';
  };
}

function newElement() {
  var li = document.createElement('li');
  var inputValue = document.getElementById('myInput').value;
  var t = document.createTextNode(inputValue);
  li.appendChild(t);
  if (inputValue === '') {
    alert('You must write something!');
  } else {
    document.getElementById('newtask').appendChild(li);
  }
  document.getElementById('myInput').value = '';

  var span = document.createElement('SPAN');
  // 替换为垃圾桶图标
  var icon = document.createElement('i');
  icon.className = 'fa fa-trash';
  icon.setAttribute('aria-hidden', 'true');
  span.className = 'close';
  span.appendChild(icon);
  li.appendChild(span);

  for (i = 0; i < close.length; i++) {
    close[i].onclick = function () {
      var div = this.parentElement;
      div.style.display = 'none';
    };
  }
}

这样修改后，所有任务项的删除按钮就会显示FontAwesome的垃圾桶图标，原来的叉号会被替换掉。

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