HTML via Javascript | JavaScript: explorando a manipulação de elementos e da localStorage

Fala ai Victor, tudo bem?

Criar elementos HTML utilizando o Javascript pode trazer maior interatividade e dinamicidade para sua aplicação. Ou seja, a ideia principal é você deixar a sua interface mais dinâmica e trazer interações a ela.

Vamos pensar no seguinte caso: Estamos desenvolvendo um site para organizar tarefas. Nosso site está bem simples, ele tem apenas um campo de texto, um botão e uma lista não ordenada vazia, seguindo o HTML abaixo:

<body>
    <div>
        <input id="input-tarefa" />
        <button id="btn-adicionar-tarefa"> Adicionar </button>
    </div>
    <div>
        <h1> Suas tarefas </h1>
        <ul id="lista-de-tarefas">
            
        </ul>
    </div>
</body>

Com o Javascript , podemos pegar o texto digitado no input de id input-tarefa assim que o usuário clicar no botão com id btn-adicionar-tarefa. E podemos usar essa informação para adicionar um novo item na lista com o texto digitado, ou seja, estamos montando uma lista dinâmica.

Para fazermos isso no Javascript, vamos pegar nosso botão e adicionar um evento de click nele e vamos fazer executar uma função ao clicar.

const botao = document.getElementById("btn-adicionar-tarefa");
const listaDeTarefas = document.getElementById("lista-de-tarefas");
const input = document.getElementById("input-tarefa");

botao.addEventListener("click", adicionarTarefa);

function adicionarTarefa(){
    const novoItem = document.createElement("li");

    const texto = document.createTextNode(input.value);
    novoItem.appendChild(texto);

    listaDeTarefas.appendChild(novoItem);
}

Com esse código, sempre que escrevermos um texto no input e clicarmos o botão ele irá adicionar um novo item na lista, tornando nosso sistema interativo.

Existem outros casos para a utilizarmos o Javascript para renderizar o HTML. Por exemplo: Precisamos pegar alguma informação do banco de dados para renderizar na tela. O Javascript consegue lidar para pegar essas informações com o BackEnd e conseguimos renderizar as informações no HTML.

Esses são só alguns exemplos da mágica que podemos fazer unindo HTML e Javascript. Espero que tenha conseguido te ajudar. Qualquer dúvida é só responder aqui no fórum.

Mergulhe em programação