如何多次使用 append HTML 元素

Question

i do an event to add input value to a list when i click the button or press enter key, it's work but when i click again on button or enter key nothing happening. js code:

// important vars 
const btn = document.getElementById('btn');
const inputV = document.getElementById('input').value;
const input = document.getElementById('input');
const todoUl = document.createElement("ul");
const todoLi = document.createElement("li")
const todoList = document.getElementById('todolist'); // this the div that contain ul and li
const form = document.getElementById('from');

// this function is for add input value and create list's 
function addTodo(todo) {
    form.appendChild(todoUl);
    todoUl.appendChild(todoLi);
    todoLi.innerText = inputV    
};

// later ..
form.addEventListener('submit' , (e) => {
    e.preventDefault(); 

    addTodo()

});
// This code is for clean input value 

Answer 1

appendChild method appends a Node to the elements childlist, but also removes it from the original place . By the first call, it is not in the DOM yet, so it appends. In the later call, it is removed and re-added to the DOM, so effectively nothing happens.

If you want to append it multiple times, you need toclone it. In your case:

todoUl.appendChild(todoLi.clone(1)); // 1 = deep

If you just want to append li item, you probably don't want to clone/add the todoUl element in the subsequent calls.