Использование JavaScript для добавления текста после элемента <Input>внутри <li>

Question

Цель - добавить текст после элемента флажка в документе

Проблема - в настоящее время текстовое поле не отображается в документе.Тем не менее, он появляется, если я установил todoLi.appendChild(checkbox) после todoLi.textContent = todo.todoText, но это не мое желаемое состояние.Я хочу, чтобы флажок добавлялся перед .textcontent из <li>

Код

const todoList = {
   
  todos: [],

  addTodo: function(todoText){
    this.todos.push({
      todoText: todoText,
      completed: false
    })
  }
}

const views = {

  displayTodos: function(){
    const todosContainer = document.querySelector('#todosContainer')

    if(todoList.todos.length === 0){
      const message = document.createElement('p')
      message.textContent = 'There are currently no todos'
      todosContainer.appendChild(message)
    }else{
      todoList.todos.forEach(function(todo){
        const checkbox = document.createElement('input')
        const todoLi = document.createElement('li')
        checkbox.setAttribute('type', 'checkbox')

        todoLi.appendChild(checkbox)
        todoLi.textContent = todo.todoText
        todosContainer.appendChild(todoLi)
      })
    }
  }
}

views.displayTodos()

<ul id="todosContainer"></ul>

Answer 1

Просто оберните текст в <span> и добавьте его в innerHTML. Согласно MDN

Установка textContent на узле удаляет вседочерние узлы и заменяет их одним текстовым узлом с заданным строковым значением

См. документы здесь Node.textContent

const checkbox = document.createElement('input')
const todoLi = document.createElement('li')
const todosContainer = document.querySelector('#todosContainer');
checkbox.setAttribute('type', 'checkbox')
let text = "some text"

todoLi.appendChild(checkbox)
todoLi.innerHTML += `<span>${text}</span>`;
todosContainer.appendChild(todoLi)

<ul id="todosContainer"></ul>

Answer 2

const todoList = {
  todos: [{
    todoText: 'text1'
  }]
}

todoList.todos.forEach(function(todo) {
  const checkbox = document.createElement('input')
  const todoLi = document.createElement('li')
  checkbox.setAttribute('type', 'checkbox')

  todoLi.appendChild(checkbox);
  todoLi.appendChild(document.createTextNode(todo.todoText));
  todosContainer.appendChild(todoLi)
})

<ul id="todosContainer"></ul>