1
resposta

Criando div com JavaScript

Participando do grupo do Discord da ImersãoDev, um amigo que fiz lá me ensinou a fazer divs com JS, dizendo ser muito mais fácil para inserir novos itens com futuramente se necessário(insere-se objetos em forma de array). A forma é a seguinte:

//perdoem meu portuglês haha
function imprimeVideos() {

    var div = document.querySelector('.divCentro');
    div.innerHTML = "";


    for (let video of videos) {
        var tagDivVideo = document.createElement('div');
        var tagAVideo = document.createElement('a');
        var tagH2 = document.createElement('h2');
        var tagImage = document.createElement('img');
        var tagNomeMusica = document.createElement('h2');

        tagDivVideo.appendChild(tagH2);
        tagDivVideo.appendChild(tagImage);
        tagDivVideo.appendChild(tagNomeMusica);
        tagAVideo.appendChild(tagDivVideo);
        div.appendChild(tagAVideo);
        tagAVideo.classList.add('tagAVid');
        div.classList.add('center');
        tagImage.src = video.previsao;
        tagH2.innerHTML = video.banda;
        tagNomeMusica.innerHTML = video.nome;
        tagDivVideo.classList.add('containerVideo', 'center');
        tagImage.classList.add('imageVideo');
    }
}

Isso torna o programa mais pesado? Trata-se de uma prática ruim? Entendo que é mais prático para listas extensas, envolvendo arrays que não são o foco dessa aula, mas queria saber mais sobre esse código.

1 resposta

Oi, Gabriel. Tudo bem?

Depende da situação, mas no geral, sim, quando temos uma lista extensa de elementos, usamos o JavaScript para incluí-los.

Principalmente quando estamos trabalhando em um cenário real, em que não sabemos quais e quantos vídeos estão vindo, é melhor criar uma solução genérica, como seu amigo apontou.

Não é uma prática ruim e você pode usar sem problemas.

Bons estudos!