Javascript：如何在自定义跨度复选框后显示 append label textContent？

Question

通过将 label 文本移动到自定义复选框的右侧而不是左侧来寻找一些帮助/知识。

如果您检查下面的 CodePen 链接，您将看到在添加新列表项时，label 文本位于自定义复选框的错误一侧。 我添加了一些硬编码列表项，以供参考我希望它看起来像什么。 如果您有解决此问题的方法，请帮助教育我。

CodePen：待办事项列表

所需 HTML output

<li class="todo__list--item">
  <input type="checkbox" id="task-1" name="task-1" />
  <label for="task-1" class="todo__label">
    <span class="custom__checkbox"></span>
    Hard code list item #1
  </label>
  <button class="btn-del" type="button">
    <img src="../images/icon-cross.svg" alt="">
  </button>
</li>

JavaScript

const usrInput = document.getElementById('create-new');
const itemCount = document.querySelector('.item-count');

function addToList() {
  const input = document.createElement('input'); 
        input.className = 'input__cb';
        input.id = 'input';
        input.type = 'checkbox';
  const spanCB = document.createElement('span');
        spanCB.className = 'custom__checkbox';
  const label = document.createElement('label');
        label.className = 'todo__label';
        label.setAttribute('for', 'input');
        label.textContent = usrInput.value;
        label.appendChild(spanCB);
  const img = document.createElement('img');
        img.src = 'https://raw.githubusercontent.com/meetjoewarren/learning-center/9b6cbb922ae2c81be98b6a0374bfcd08a0081e98/frontend-mentor/todo-app-main/images/icon-cross.svg';
  const button = document.createElement('button');
        button.className = 'btn-del';
        button.type = 'button';
        button.appendChild(img);
  const listItem = document.createElement('li');
        listItem.className = 'todo__list--item';
        listItem.draggable = 'true';
        listItem.appendChild(input);
        listItem.appendChild(label);
        listItem.appendChild(button);
  const details = document.querySelector('.todo__list--details'); 
  const fragment = new DocumentFragment();
        fragment.appendChild(listItem);
  const list = document.querySelector('.todo__list');
        list.insertBefore(fragment, details);
  itemCount.textContent = document.querySelectorAll('.todo__list--item').length;
  usrInput.value = '';
}

// Add to list on 'Enter' press
usrInput.addEventListener('keydown', e => {
  if (e.code === 'Enter') {
    addToList();
  }
})


// Delete Button
const deleteBtn = document.querySelectorAll('.btn-del');

for (let i = 0; i < deleteBtn.length; i++) {
  deleteBtn[i].addEventListener('click', e => {
    e.target.parentElement.parentElement.remove();
    itemCount.textContent = document.querySelectorAll('.todo__list--item').length;
  })
}

// If checked cross out
// const inputCB = document.querySelectorAll('.input__cb');
// const todoLabel = document.querySelectorAll('.todo__label');
// for (let i = 0; i < todoLabel.length; i++) {
//   if (inputCB == true) {
//     todoLabel[i].classList.add('strikeout');
//   } else {
//     return;
//   }
// }

另外，奖金问题...我 go 如何观察列表的更改，以便我可以更新删除/删除按钮 function？ 变异观察者？ 现在它只是将事件侦听器附加到当前硬编码的列表项。

Answer 1

复选框出现在文本的错误一侧，因为它被附加到 label 的末尾，在文本之后。 不要使用appendChild()方法来执行此操作，而是使用prepend()方法。 这将在文本前插入自定义复选框。

关于您的第二个问题，您可以在创建元素后立即将事件侦听器添加到addToList() function 中的删除按钮。 在这种情况下，Mutation Observer 可能不是您想要的。