1
resposta

No caso do exemplo se eu quisesse que o conteúdo da caixa de texto ficasse vazia logo após clicar no botão, eu deveria colocar no final do código - logo abaixo de lista.appendChild(li)- um .innerHTML =""; ou remove()?

<ul class="lista">
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

<input id="campo"><button id="botao">Adiciona</button>

<script>

    var lis = document.querySelectorAll('li');

    for(var i = 0; i < lis.length; i++) {

        lis[i].addEventListener('click', function() {

            alert(this.textContent);
        });
    }

    var botao = document.querySelector('#botao');
    var input = document.querySelector('#campo');
    var lista = document.querySelector('.lista');

    botao.addEventListener('click',function() {

        var li = document.createElement('li');
        li.textContent = input.value;
        lista.appendChild(li);
    });
</script>
1 resposta

Oi Leopoldo, tudo bem?

Se voce usar o remove() ele vai matar o campo de texto.

Eu limparia o valor do campo assim:

    input.value = "";

O innerHTML é mais voltado para elementos que possuem um conteúdo ali de tags de abertura e fechamento, repara que o input (como o img por ex) é um elemento que não possui essa característica.

Espero ter ajudado e bons estudos,

Abcs!