Can't target checkbox inside of a li which is created after

Question

I am trying to create a li on click and append a checkbox to the li. However, even if I append the checkbox I cannot target it(change it). How can I target the checkbox of an li that is not initially on the page?

    const li = document.createElement("li");
    li.className = "collection-item";
    li.appendChild(document.createTextNode(todoInput.value));

    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.style.opacity = "1";
    checkbox.className = "delete-item right";
    checkbox.style.position =  "relative";



    li.appendChild(checkbox);
//todoList is ul which is created on page load
    todoList.appendChild(li);

Answer 1

You can achieve this using event delegation . You target an element that is already loaded in your document mostly the parent element. in your case the ul of the li that is created dynamically then test some condition to test whether the target element is the item you are looking for.

NB. I try to produce an example code because you did not add your complete code snippet.

 const form = document.getElementById("todo-form"); const todoList = document.querySelector(".collection"); const clearBtn = document.querySelector(".clear-todos"); const filter = document.getElementById("filter"); const todoInput = document.getElementById("todo"); document.addEventListener("click", function(e){ if(e.target.classList.contains("delete-item")){ // Check this condition alert(e.target.value); } }) loadEventListeners(); function loadEventListeners() { //form listener form.addEventListener("submit", addTodo); //remove(x) to-do } function addTodo(e) { if (todoInput.value === "") { // errorDiv.appendChild(document.createTextNode("test")); } else { const li = document.createElement("li"); li.className = "collection-item"; // li.appendChild(document.createTextNode(todoInput.value)); const checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.value = "checkbox"; checkbox.style.opacity = "1"; checkbox.className = "delete-item right"; checkbox.style.position = "relative"; li.appendChild(checkbox); todoList.appendChild(li); } e.preventDefault(); }

 <div class="container"> <div class="row"> <div class="col s12"> <div id="main" class="card"> <div class="card-content"> <!-- <div id="error-div"--> <!-- class="center-align"><span id="error"></span>--> <!-- </div>--> <h1 class="card-title center-align">To Do List</h1> <div class="row"> <form id="todo-form"> <div class="input-field col s12"> <input type="text" name="todo" id="todo"> <label for="todo">New Todo</label> </div> <input type="submit" value="Add To-Do" class="waves-effect waves-light btn light-green darken-1"> </form> </div> </div> <div class="card-action"> <h5 id="todo-title" class="center-align">To Do's</h5> <div class="input-field col s12"> <input type="text" name="filter" id="filter"> <label for="filter">Filter To-do's</label> </div> <ul class="collection"></ul> <a href="" class="clear-todos btn red darken-4">Clear Tasks</a> </div> </div> </div> </div> </div>