Javascript:我如何在自定义span复选框后附加标签textContent ?

Question

寻求将标签文本移动到自定义复选框的右侧而不是左侧的帮助/知识。

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

CodePen: Todo List

期望的HTML输出

<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;
//   }
// }

还有，额外的问题…我将如何去观察列表的变化，以便我可以更新删除/删除按钮功能?突变观察者吗?现在，它只将事件侦听器附加到当前硬编码的列表项上。

Answer 1

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

关于您的第二个问题，您可以在创建元素之后，将事件侦听器添加到addToList()函数中的delete按钮。在这种情况下，突变观察者可能不是你想要的。