用字符串

Question

所以我正在创建一个待办事项应用程序，我试图添加字体真棒图标，以便在按下切换完成按钮时显示复选标记。我无法通过HTML添加它，因为列表通过JS动态更改。这是if / else打印出已完成和未完成的任务。

  if (todo.completed === true) {
    todoTextDone = '(X)' + todo.todoText; // <i class="fa fa-check" aria-hidden="true"></i>
  } else {
    todoTextDone = '( )' + todo.todoText;
  }

我尝试过document.write，document.querySelectory，document.getElementById。我尝试创建一个CSS类并从JS中选择它，但它给了我一个Object集合错误。我已经尝试瞄准li在CSS之前有一个字体真棒图标，但也没有用！我试图以错误的方式使用它们吗？根据所有理论，document.write方法应该有效，因为它将HTML插入到DOM中，所以我在这里缺少什么？

Answer 1

始终拥有图标，然后使用CSS隐藏它，具体取决于项目的状态（此处由课程指示）：

＆＃13;

＆＃13;

#toDo {
  padding: 0;
  list-style-type: none
}

#toDo li .fa {
  color: green
}
#toDo li.open .fa {
  opacity: 0
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<ul id="toDo">
  <li class="open"><i class="fa fa-check" aria-hidden="true"></i> First item</li>
  <li class="done"><i class="fa fa-check" aria-hidden="true"></i> Second item</li>
</ul>

＆＃13;

＆＃13;

＆＃13;

不要使用document.write() btw。

Answer 2

此代码段仅使用CSS和Font-Awesome stylesheet。如果您更喜欢其他格式，请参阅cheatsheet

<强>段

.chx {
  display: none;
}
.chx + label {
  color: #222;
  font-size: 18px;
  line-height: 100%;
}
.chx + label span {
  display: inline-block;
  width: 18px;
  height: 18px;
  vertical-align: baseline;
  cursor: pointer;
}
.chx + label span {
  background: #666;
  line-height: 100%;
}
.chx + label span {
  line-height: 100%;
}
#chx1:checked + label span:before {
  content: '\f00c';
  color: #F00;
  font-family: FontAwesome;
  font-weight: 900;
  font-size: 20px;
}
#chx2:checked + label span:before {
  content: '\f04b';
  color: #0ff;
  font-family: FontAwesome;
  font-weight: 900;
  font-size: 20px;
}
#chx2 + label span:before {
  content: '\f04c';
  color: #0ff;
  font-family: FontAwesome;
  font-weight: 900;
  font-size: 20px;
}
#chx2:checked + label span:after {
  content: 'Play';
}
#chx2 + label span:after {
  content: 'Pause';
  font-family: Verdana;
  margin-left: 5px;
}

<link href='https://cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'>

<input id='chx1' class='chx' type='checkbox'>
<label for='chx1'><span></span>
</label>
<hr>
<input id='chx2' class='chx' type='checkbox'>
<label for='chx2'><span></span>
</label>

Answer 3

首先你必须创建元素

var iEl = document.createElement('i');  
iEl.style.className = "fa fa-check";  
document.getElementById("yourElementId").appendChild(iEl);