Dúvida no código certo

Olá, estou com dúvida em relação a como o código deveria ser mudado para que o evento click funcione tanto para os elementos já existentes quanto para os novos elementos.

o código do exercício é esse:

<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>