Text disappears when new li element is created

When I press enter and new li element is added, the text disappears. First post, sorry if something is messed up.

document.getElementById("list").onkeydown = function Manipulate() {
if (event.keyCode==13) {
  //var listing = document.getElementById("input").value; 
  var li = '<li> <input type="text" id="input"/> </li>';
  document.getElementById("list").innerHTML += li;
  //document.getElementById("input").value = listings;
}
else if (event.keyCode==8) {
  let list = document.getElementById('list');
list.removeChild(list.firstElementChild);
}
}

Answer

The value of your inputs disappear, because the browser has to create all child elements again, whenever you change the innerHTML value.

If you want to keep all existing elements the way they are, you should use appendChild or insertAdjacentHTML.

Since you did not give much context regarding what you want to achieve, i can only answer based on your snippet:

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
</head>

<body>
    <ul id="list">
        <li>
            <input type="text">
        </li>
    </ul>

    <script>
        const li = '<li><input type="text"/></li>';
        const list = document.getElementById('list');

        function manipulate() {
            if (event.keyCode == 13) {
                list.insertAdjacentHTML('beforeEnd', li);
            } else if (event.keyCode == 8) {
                list.removeChild(list.firstElementChild);
            }
        }

        list.addEventListener('keydown', manipulate)

        // Remove, if no longer needed
        // list.removeEventListener('keydown', manipulate)
    </script>
</body>

To explain some of the changes i made:

First of all, I prefer using addEventListener, so you can remove the event listener again, if you don’t need it anymore. Also it does not replace the default input behavior that way. The Manipulate function is supplied as the second parameter and will be executed on every input.

I changed the li and list variables to constants since they always stay the same and moved them outside of the event handler, so the browser does not need to assign them again whenever you hit a button.

Another thing I noticed is, that you will end up with multiple elements that have the id input. Best practice would be either changing this to a class or removing it, if you don’t need it.


At this point I feel like this might not exactly achieve what you intended. Hitting backspace with only one list element remaining, will remove it entirely and leave you with no way to add another one again.

Removing the first Element every time might be a bit unintuitive. It might also be better to put the cursor focus into the newly created input element after pressing enter…