Select 个由 createElement JS 创建的标签

Question

我在输入时按下键输入时创建标签，我想select复选框并应用事件更改。那么我如何 select createElement 创建的标签？

HTML

<div class="container">
        <div class="row">
            <div class="col-4">
                <div class="container-list">
                    <h1>To Do List</h1>
                    <input type="text" placeholder="Ajouter une tache">

                </div>
            </div>
        </div>

    </div>

JS

const list = document.querySelector('.container-list');
const input = document.querySelector('input');
// const icons = document.querySelectorAll('i');
const listIcons = document.querySelectorAll('.list input[type=checkbox]');

input.addEventListener('keydown', (e) => {
    if (e.key === 'Enter') {
        const listAdded = document.createElement('div');
        listAdded.innerHTML = "<input type='checkbox'>" + '<span id="listContent">' + input.value + '</span>' + '<i class="fas fa-edit"></i>' + '<i class="fas fa-trash"></i>';
        listAdded.setAttribute('class', 'list');
        list.appendChild(listAdded);
    };
});

console.log(listIcons)

listIcons.forEach(listIcon => {
    listIcon.addEventListener('change', () => {
        alert('test')
    });
});

Answer 1

当您调用 document.createElement 时，对您的元素的引用将存储在变量本身中。如果您希望在其他函数中或在创建该元素的函数范围之外使用该元素，只需将该变量声明为全局变量即可。

在您提供的代码中，listAdded 变量正是您要查找的内容。

Answer 2

那是因为您在文件的顶部定义了一次 listIcons，并且在创建新元素后没有更新它。所以我的建议是在 keydown 事件监听器中为每个元素添加事件监听器。

Select 个由 createElement JS 创建的标签

Select tags created by createElement JS

javascript

keydown

createelement

queryselector