如何严格使待办事项的text属性可单击以进行编辑（而不是指向其他站点的链接）

Question

我创建了一个待办事项列表，该任务列表使用文本属性（待办事项文本）和三个按钮来推送li：选中，删除并添加更改。我希望能够通过单击待办事项文本并将其变成一个空文本框来更改它。待办事项文本更新后，我将点击“更改”按钮，然后将新文本应用为待办事项文本。

我曾尝试通过html使其链接，但这导致按钮子项无法正常工作。我尝试过的所有方法都无法使文本属性仅可点击/可编辑。我也尝试了document.designMode ='on';仅将todoText定位为0时无效，但这毫无意义，因为无论如何一切都变得可编辑。

这是视图的主要代码（并非全部）

var view = {        
  displayTodos: function() {     
    var todosUl = document.querySelector('ul');     
    todosUl.innerHTML = '';     
    todoList.todos.forEach (function(todo, position) {    
      var todoLi = document.createElement('li');    
      var todoTextWithCompletion = '';    
      if (todoList.todos[position].completed === true) {    
        todoTextWithCompletion = '(x) ' + todo.todoText;    
      } else {     
        todoTextWithCompletion = '( ) ' + todo.todoText;    
      }    
        todoLi.id = position;    
      todoLi.textContent = todoTextWithCompletion;    
      todoLi.appendChild (this.createDeleteButton());    
      todoLi.appendChild (this.createToggleCompletedButton());    
      todosUl.appendChild(todoLi);    
      }, this);    
       },    

没有任何作用