Выберите теги, созданные createElement JS

Question

Я создаю теги, когда мы нажимаем клавишу «Ввод», и я хотел бы установить флажок и применить изменение события. Итак, как я могу выбрать теги, созданные 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

Это потому, что вы определяете listIcons один раз в верхней части файла и не обновляете его после создания новых элементов. поэтому я предлагаю добавить прослушиватель событий для каждого элемента после его создания в прослушивателе событий keydown.

Answer 2

Ссылка на ваш элемент сохраняется в самой переменной, когда вы вызываете document.createElement. Если вы хотите sh использовать этот элемент в других функциях или вне области действия функции, в которой вы создаете элемент, просто объявите эту переменную как глобальную переменную.

В предоставленном вами коде listAdded переменная - это именно то, что вам нужно.