如何更改克隆元素的跨度文本？ - JavaScript

Question

我正在克隆一个隐藏的 li 元素来创建待办事项列表项，然后将文本更改为与关联待办事项对象的文本属性相同。代码运行后，我可以在控制台看到它们发生了变化，但页面上的元素仍然显示旧文本。

JsFiddle 示例：here

var todoList = {

  //stores todo list items on an array
  todos: [],

  //adds a new todo object and adds it to the array
  addTodo: function(text) {
    this.todos.push({
      text: text,
      completed: false,
      priority: "low"
    });
  }
};

var view = {
  displayTodos: function() {

    //empty ul
    var todosUl = document.querySelector('ul');
    todosUl.innerHTML = '';

    for (var i = 0; i < todoList.todos.length; i++) {

      //Item to be cloned
      var originalItem = document.getElementById('original-item');

      //Clones original-item
      var newItem = originalItem.cloneNode(true);

      //unique id for each item based on position in array
      newItem.id = i;

      //puts the new clone into the ul
      todosUl.appendChild(newItem);

      //selects the text in the span
      var itemText = newItem.childNodes[3].childNodes[1].childNodes[3].innerHTML;

      //sets the span text to the text property of the todo object
      itemText = todoList.todos[i].text;

      //displays the item by changing from .hidden to .item
      newItem.className = "item";

      console.log(itemText);

    }
  }
};

todoList.addTodo("Walk the dog");
todoList.addTodo("second");
todoList.addTodo("third");
view.displayTodos();

body {
  font-family: 'Muli', san-serif;
  fill: #D1D1D1;
  margin: 0;
}
.hidden {
  display: none;
}
.item {
  width: 95%;
  margin: 0 auto 15px auto;
  border: 2px solid #5C5C5C;
  border-radius: 8px;
  background-color: white;
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
  position: relative;
  list-style-type: none;
}
.item__priority-button--default {
  height: 15px;
  border-radius: 5px 5px 0 0;
  background-color: #3B76F7;
}
.item__check-box {
  height: 17px;
  width: 17px;
  position: relative;
  top: 2px;
  left: -5px;
}
.item__label {
  font-size: 20px;
  margin: 10px 0 13px 13px;
  max-width: 300px;
}
.item__check-box,
.item__label {
  display: inline-block;
}
.item__check-box:hover,
.item__label:hover {
  cursor: pointer;
}

<li class="hidden" id="original-item">
  <div class="item__priority-button--default"></div>
  <div class="item-content">
    <label class="item__label" onClick="">
      <input type="checkbox" class="item__check-box">
      <span>*new task*</span>
    </label>
  </div>
</li>

<ul>
</ul>

Answer 1

怎么了？

// itemText is a variable that contains a string
// but it doesn't know anything about DOM nodes
var itemText = newItem.childNodes[3].childNodes[1].childNodes[3].innerHTML;

// this just stores new value in itemText variable
itemText = todoList.todos[i].text;

怎么做才对？

// you want to modify a property of a node
var node = newItem.querySelector('span');

// innerText instead innerHTML
node.innerText = todoList.todos[i].text;

https://jsfiddle.net/1ppxpum3/5/

如何更改克隆元素的跨度文本？ - JavaScript

How to change the span text of a cloned element? - JavaScript

javascript

dom-manipulation

cloning