通过JavaScript敲打字符串

在我的

if

/

else

语句中，而不是具有：

todoTextWithCompletion = '(x) ' + todo.todoText;

我想在DOM中显示一个罢工字符串（

todo.todoText input

）。我试着把它换成新的

todoTextWithCompletion = todo.todoText.strike();

但是它在DOM中显示

todo.todoText

displayTodos: function () {
var todosUl = document.querySelector('ul');
todosUl.innerHTML = '';

todoList.todos.forEach(function (todo, position) {
  var todoLi = document.createElement('li');
  var todoTextWithCompletion = '';

  if (todo.completed === true) {
    todoTextWithCompletion = '(x) ' + todo.todoText;
  } else {
    todoTextWithCompletion = '( ) ' + todo.todoText;
  }

  todoLi.id = position;
  todoLi.textContent = todoTextWithCompletion;
  todoLi.appendChild(this.createToggleButton());
  todoLi.appendChild(this.createDeleteButton());
  todosUl.appendChild(todoLi);
}, this);
},

---

您还可以使用JavaScript设置文本内容的样式

假设

todoLi

是您要遍历的元素：

todoLi.style.textDecoration = "line-through";

使用新的，这将是：

todoLi.attributeStyleMap.set('text-decoration', 'line-through');

这两种方法都具有相同的效果，就像您正在应用

文本装饰：行通过属性

还要记住，HTML5不支持
标记

改用
或
。
您将设置为HTML字符串<代码>文本内容

未解析为HTML，而是添加为纯文本：

与innerHTML的区别

Element.innerHTML返回其名称指示的HTML。有时人们 使用innerHTML检索或写入元素内的文本。文本内容 具有更好的性能，因为它的值未解析为HTML。 此外，使用textContent可以防止XSS攻击

相反，您应该使用

document.createElement（“strike”）构造
节点

，使用

innerHTML

，或者按照U-ways的建议，添加

文本装饰：行通过

CSS样式

document.getElementById（“文本内容”）.textContent=“foo”
document.getElementById（“内部html”）.innerHTML=“foo”

---

您可以使用

类列表API添加类，而不是向元素添加原始样式：

CSS

.item-completed {
text-decoration: line-through;
}

Javascript

var todoLi = document.createElement('li');

if (todo.completed === true) {

    todoLi.classList.add('item-completed');
}

您可以使用CSS进行以下操作：
文本装饰：行通过
您使用的是
textContent
而不是
innerHTML
。谢谢您，您的答案看起来也不错。但是，我对你提供的所有细节都有些困惑。我还在学习所有的术语。我感谢你的帮助！请注意，使用新的CSS类型化对象模型将是：
todoLi.attributeStyleMap.set（'text-decoration'，'line-through'）见Eric Bidelman 2018年3月的文章：谢谢，答案更新。（我期待着尝试
属性样式图
）谢谢鲁宁！你的回答也很有帮助！添加一个类并在CSS文件中保留所有样式似乎是一个明智的选择！我很感激！不客气。作为一般的经验法则（这并不总是可能的），我倾向于在样式表中保留所有样式，并向DOM添加或减去类，而不是添加或减去原始样式。在本例中，没有真正的区别，但是在
类
包含许多样式声明的情况下，它更实用、更简洁。