[Dúvida] Remoção do conteúdo

Olá! Tudo bem? Nesse caso não há nenhum problema em fazer desse jeito, mas no geral manipular o innerHTML de um elemento manualmente pode ser bem perigoso, principalmente quando vamos mostrar algum dado de input do usuário, por exemplo:

Se tivermos um form para o usuário preencher com o nome e em seguida exibirmos o nome dele:

<form id="formulario">
    <label for="nome">Digite seu nome</label>
    <input id="nome" name="nome" type="text"/>
    <input type="submit"/>
</form>
<h1 id="boas-vindas"></h1>

Para exibir o nome do usuário, podemos usar o seguinte script:

const form = document.querySelector("#formulario");
form.addEventListener("submit", (event) => {
    event.preventDefault();
    document.querySelector("#boas-vindas").innerHTML = `Bem-vindo, ${form.nome.value}`;
});

Aparentemente o código funcionaria normalmente, porém um usuário malicioso poderia escrever código HTML dentro do input, e esse código seria executado na página, pois estamos manipulando a propriedade innerHTML, que é própria para HTML. O usuário poderia por exemplo colocar o seguinte script como se fosse seu nome:

<script>document.innerHTML = "";</script>

Então toda a página ficaria em branco, mas esse problema pode ser evitado trocando innerHTML por textContent. Enfim, nesse caso não há problema em fazer isso, mas é bom tomar cuidado em manipular o innerHTML em outras situações, inclusive se você quiser remover somente alguns elementos e não todos seria mais fácil usar o método removeChild. Espero ter ajudado!

Muito obrigado Breno pela resposta mais que completa!!