Print Div JavaScript: como usar e quais as funcionalidades

Se você já se perguntou como desenvolver uma interface interativa e visualmente envolvente usando JavaScript, este tutorial trará exemplos disso focado no uso do Print div JavaScript.

Neste artigo, exploraremos passo a passo de como criar, modificar e concatenar elementos div dinamicamente em sua página da web, oferecendo uma experiência interativa e única aos seus visitantes.

Não é necessário ser um especialista em programação para acompanhar este guia, pois abordaremos conceitos básicos de HTML, CSS e JavaScript que serão fundamentais para o desenvolvimento de uma funcionalidade dinâmica.

Confira o texto abaixo e veja os conceitos necessários.

Outros títulos interessantes:

O que é Print div JavaScript?

JavaScript possui a funcionalidade “Print div” que permite criar elementos dinâmicos na web. Com essa funcionalidade, é possível modificar, criar, deletar ou mover elementos, proporcionando uma experiência de usuário mais fluida usando JavaScript.

Uma prática comum no mercado é criar conteúdo dinamicamente com RESTful, e o desenvolvedor precisa saber como manipular esses dados. Antes disso, é necessário aprender a manipular elementos e imprimir novas divs HTML na página.

Assim, vamos avançar e ensinar como construir uma Div Interativa com Flex e Árvore em JavaScript.

Pré-requisitos para usar Print div JavaScript

Conhecimentos básicos de HTML, CSS e JavaScript.

Como usar Print div JavaScript

Passo 1: Preparando o HTML

Primeiramente, crie um novo arquivo com extensão ".html" utilizando um editor de texto ou uma ferramenta de IDE de sua escolha. Esse arquivo servirá como a base da sua página web.

Como ferramenta IDE, recomenda-se usar os populares do mercado de trabalho, é bom se familiarizar com eles para uma boa oportunidade, algumas menções populares são Visual Studio Code (Para desenvolvimento geral), IntelliJ IDEA, Atom, Notepad+ e Sublime Text.

No arquivo HTML, comece definindo a estrutura básica da página, utilizando as tags <html>, <head>, e <body>. No <head>, você pode adicionar metadados, links para folhas de estilo CSS e, o mais importante, incluir o script do seu código JavaScript utilizando a tag <script>

Você pode fazer isso através de um arquivo externo (usando o atributo src) ou incorporando o código diretamente entre as tags <script></script>.

Para visualizar o resultado do seu código JavaScript em ação, abra o arquivo HTML em um navegador da web. Você pode simplesmente clicar duas vezes no arquivo HTML, e o navegador abrirá a página com o JavaScript em execução.

Para criar, modificar e concatenar elementos <div> com JavaScript 

Você pode usar a API DOM (Modelo de Objeto de Documento). Essa API permite que você interaja com a estrutura HTML de uma página e faça manipulações dinâmicas, como criar novos elementos, modificar seus atributos e conteúdo, bem como adicionar e remover elementos.

Acréscimo: através da API DOM, é possível acessar elementos HTML por meio de seletores como getElementById, getElementsByClassName, getElementsByTagName e querySelector, permitindo encontrar elementos específicos na página.

Aqui vem um exemplo simples do que se trata:

<!DOCTYPE html>

<html>

<head>

    <title>Manipulação de Divs com JavaScript</title>

</head>

<body>

    <button onclick="criarDiv()">Criar Div</button>

    <script>

        function criarDiv() {

            // Criar um novo elemento div

            var novaDiv = document.createElement('div');

            // Adicionar algum conteúdo na div

            novaDiv.textContent = 'Nova Div criada com JavaScript';

            // Adicionar a nova div ao final do body (ou outro elemento de sua escolha)

            document.body.appendChild(novaDiv);

        }

    </script>

</body>

</html>
Saída visual do código

Nesse exemplo, apresentamos um código HTML com um botão simples que dispara a função CriarDiv() em JavaScript, essa função é responsável por criar uma div, adicionar conteúdo a ela e, em seguida, concatená-la ao corpo do HTML. É uma maneira eficiente de gerar conteúdo dinamicamente e melhorar a interatividade da página.

É importante destacar que o uso de botões pré-definidos é apenas uma das muitas possibilidades. Com JavaScript, podemos explorar uma infinidade de gatilhos, condições e eventos para criar e modificar conteúdo dinamicamente. 

Isso nos permite personalizar a experiência do usuário de acordo com ações específicas, como cliques, digitações ou até mesmo respostas a formulários.

Passo 2: Criando botão dinamicamente

A seguir um exemplo sem um body na página, apenas JavaScript para criar o conteúdo do body.

<!DOCTYPE html>

<html>

<head>

    <title>Manipulação de Divs com JavaScript</title>

</head>

<body>

    <script>

        // Função para criar as divs e o botão

        function criarDivs() {

            // Criar o botão dinamicamente

            var botao = document.createElement('button');

            botao.textContent = 'Criar Divs';

            botao.onclick = function() {

                // Função para ser executada ao clicar no botão

                criarDivsDinamicamente();

            };

            document.body.appendChild(botao);

        }

        // Função para criar as divs dinamicamente

        function criarDivsDinamicamente() {

            // Criar as duas divs

            var div1 = document.createElement('div');

            div1.textContent = 'Esta é a primeira div criada dinamicamente.';

            div1.style.backgroundColor = 'lightblue';

            var div2 = document.createElement('div');

            div2.textContent = 'Esta é a segunda div criada dinamicamente.';

            div2.style.backgroundColor = 'lightgreen';

            // Criar um elemento pai (container) para as duas divs

            var container = document.createElement('div');

            // Adicionar as duas divs ao container

            container.appendChild(div1);

            container.appendChild(div2);

            // Adicionar o container ao body da página

            document.body.appendChild(container);

        }

        // Chamar a função para criar o botão

        criarDivs();

    </script>

</body>

</html>
Saída visual do código

A principal diferença neste exemplo é a primeira função que é chamada quando a página é carregada. Assim, essa função cria o botão e o restante do algoritmo é semelhante ao exemplo anterior.

Passo 3: Aprimorando a experiência visual

Agora, vamos a algo que entretenha visualmente:

<!DOCTYPE html>

<html>

<head>

    <title>Exemplo de Div Interativa com Flex</title>

    <style>

        body{

            margin: 0px;

        }

        /* Estilo para a div que ocupa a tela inteira */

        #divPrincipal {

            display: flex;

            width: 100vw;

            height: 100vh;

            flex-wrap: wrap;

            overflow: hidden;

            justify-content: space-evenly;

            align-content: stretch;

        }

        /* Estilo para os quadrantes */

        .quadrante {

            flex: 1 1 50%;

            border: 1px solid black;

            border-radius: 4px;

            box-sizing: border-box;

            display: flex;

            justify-content: space-evenly;

            font-size: 20px;

            cursor: pointer;

            align-content: stretch;

            flex-wrap: wrap;

            text-align: center;

            box-shadow: 2px 2px 2px inset;

        }

    </style>

</head>

<body>

    <div id="divPrincipal" onclick="criarFilhos(event)">

        <div class="quadrante">1</div>

        <div class="quadrante">2</div>

        <div class="quadrante">3</div>

        <div class="quadrante">4</div>

    </div>

    <script>

        function criarFilhos(event) {

            var target = event.target;

            // Verificar se o clique foi em um dos quadrantes

            if (target.classList.contains('quadrante')) {

                // Limpar o conteúdo do quadrante clicado

                target.innerHTML = '';

                // Criar quatro filhos iguais dentro do quadrante

                for (var i = 1; i <= 4; i++) {

                    var filho = document.createElement('div');

                    filho.classList.add('quadrante');

                    // Calcular cores com base no nível de profundidade (contador "i")

                    var r = 255 - i * 20;

                    var g = 150 + i * 20;

                    var b = 100 + i * 20;

                    filho.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;

                    target.appendChild(filho);

                }

            }

        }

    </script>

</body>

</html>
Saida do código usando design de quadrantes

Nesse exemplo, a magia acontece quando usamos a propriedade onClick diretamente na div. Ao clicar, uma função JavaScript é acionada, criando quatro novas divs como filhos da div clicada. Esse efeito é gerado recursivamente, permitindo que cada nova div também tenha a mesma funcionalidade.

O CSS entra em cena para proporcionar a aparência desejada. Focamos na criação dinâmica e interativa das divs.

Agora, enfrentemos um desafio maior. A partir do último exemplo, queremos ter mais controle sobre nossas divs dinâmicas. Para isso, utilizaremos uma estrutura de dados chamada “árvore” (também conhecida como tree) para nos auxiliar. Assim, essa abordagem permitirá um controle mais aprofundado da hierarquia das divs, considerando sua profundidade na estrutura.

Criando a estrutura de dados em forma de árvore com Print div JavaScript

Um objeto JavaScript representa a estrutura, contendo uma cor e uma lista de filhos. A árvore será atualizada dinamicamente conforme criamos novos quadrantes.

// Estrutura de dados em forma de árvore

var arvore = {

    cor: { r: 255, g: 150, b: 100 },

    filhos: []

};

Criando a função para gerar os filhos dos quadrantes

Ao criar a função criarFilhos(event, profundidade) que será acionada quando o usuário clicar em um dos quadrantes. Esta função cria os filhos dentro do quadrante clicado, utilizando a estrutura de dados em forma de árvore e aplicando as cores de forma dinâmica.

function criarFilhos(event, profundidade) {

    var target = event.target;

    // Verificar se o clique foi em um dos quadrantes

    if (target.classList.contains('quadrante')) {

        // Limpar o conteúdo do quadrante clicado

        target.innerHTML = '';

        // Gerar a árvore dinamicamente para os filhos

        gerarArvore(target, arvore, profundidade);

    }

}

Função para gerar a Árvore recursivamente

Criando a função gerarArvore(pai, no, profundidade) que irá criar os filhos recursivamente dentro do quadrante pai, ajustando a cor conforme a profundidade na árvore.

function gerarArvore(pai, no, profundidade) {

    // Criar quatro filhos iguais dentro do quadrante

    for (var i = 0; i < 4; i++) {

        var filho = document.createElement('div');

        filho.classList.add('quadrante');

        var corMaisForte = 255 - profundidade * 20;

        filho.style.backgroundColor = `rgb(${corMaisForte}, ${no.cor.g}, ${no.cor.b})`;

        pai.appendChild(filho);

        // Se o nó tiver filhos, chamar a função recursivamente para cada filho

        if (no.filhos.length > 0) {

            gerarArvore(filho, no.filhos[i], profundidade + 1);

        }

    }

}

Ao clicar em um quadrante, a função gerarArvore será chamada com a profundidade correta, e essa profundidade será passada corretamente na chamada recursiva para a função gerarArvore

Dessa forma, ajuste a cor de acordo com a profundidade na árvore. Teste o código novamente para ver os quadrantes coloridos corretamente, criando uma hierarquia de cores mais forte à medida que adentramos a árvore.

Saída do código usando quadrantes, estrutura de dados árvore e colorindo baseado na profundidade na estrutura

O código completo do exemplo:

<!DOCTYPE html>

<html>

<head>

    <title>Exemplo de Div Interativa com Flex</title>

    <style>

        body{

            margin: 0px;

            user-select: none;

        }

        /* Estilo para a div que ocupa a tela inteira */

        #divPrincipal {

            display: flex;

            width: 100vw;

            height: 100vh;

            flex-wrap: wrap;

            overflow: hidden;

            justify-content: space-evenly;

            align-content: stretch;

        }

        /* Estilo para os quadrantes */

        .quadrante {

            flex: 1 1 50%;

            border: 1px solid black;

            border-radius: 4px;

            box-sizing: border-box;

            display: flex;

            justify-content: space-evenly;

            font-size: 20px;

            cursor: pointer;

            align-content: stretch;

            flex-wrap: wrap;

            text-align: center;

            box-shadow: 2px 2px 17px;

            font-size: 90%;

        }

    </style>

</head>

<body>

    <div id="divPrincipal" onclick="criarFilhos(event)">

        <div class="quadrante">1</div>

        <div class="quadrante">1</div>

        <div class="quadrante">1</div>

        <div class="quadrante">1</div>

    </div>

    <script>

        // Estrutura de dados em forma de árvore

        var arvore = {

            cor: { r: 255, g: 150, b: 100 },

            filhos: []

        };

        function criarFilhos(event, profundidade) {

            var target = event.target;

            // Verificar se o clique foi em um dos quadrantes

            if (target.classList.contains('quadrante')) {

                // Limpar o conteúdo do quadrante clicado

                // Gerar a árvore dinamicamente para os filhos

                gerarArvore(target, arvore, profundidade);

            }

        }

        function gerarArvore(pai, no, profundidade) {

            if(profundidade == null){

                profundidade = pai.textContent*1+1;

                if (pai.textContent == ""){

                    profundidade = 1;

                }

            }

            pai.innerHTML = '';

            // Criar quatro filhos iguais dentro do quadrante

            for (var i = 0; i < 4; i++) {

                var filho = document.createElement('div');

                filho.classList.add('quadrante');

                var corMaisForte = 255 - profundidade * 20;

                filho.style.backgroundColor = `rgb(${corMaisForte}, ${no.cor.g}, ${no.cor.b})`;

                filho.textContent = profundidade;

                pai.appendChild(filho);

                // Se o nó tiver filhos, chamar a função recursivamente para cada filho

                if (no.filhos.length > 0) {

                    gerarArvore(filho, no.filhos[i], profundidade + 1);

                }

            }

        }

    </script>

</body>

</html>

Alternativas a esse método

Algumas formas comuns de interagir com elementos HTML usando JavaScript:

  1. appendChild():

O método appendChild() é utilizado para adicionar um novo elemento como filho de outro elemento HTML. Ele permite que você insira um elemento no final da lista de filhos de um elemento-pai. Por exemplo:

const parentElement = document.getElementById('parent');

const newChild = document.createElement('div');

parentElement.appendChild(newChild)
  1. textContent:

A propriedade textContent é utilizada para definir ou obter o conteúdo de texto de um elemento HTML. Ela permite que você insira ou obtenha o texto dentro de uma tag. Por exemplo:

const element = document.getElementById('myElement');

element.textContent = 'Este é o novo texto.';
  1. innerHTML:

A propriedade innerHTML é usada para definir ou obter o conteúdo HTML de um elemento. Ela permite que você insira ou obtenha HTML dentro de uma tag. Por exemplo:

const element = document.getElementById('myElement');

element.innerHTML = '<h2>Novo Título</h2><p>Novo conteúdo</p>';
  1. innerText:

A propriedade innerText é semelhante à propriedade textContent, mas ela retorna apenas o texto visível no elemento, excluindo qualquer código HTML. Por exemplo:

const element = document.getElementById('myElement');

const text = element.innerText;
  1. insertBefore():

O método insertBefore() é usado para inserir um novo elemento antes de outro elemento já existente, dentro do mesmo elemento-pai. Ele permite que você especifique a posição de inserção do novo elemento. Por exemplo:

const parentElement = document.getElementById('parent');

const newChild = document.createElement('div');

const referenceElement = document.getElementById('reference');

parentElement.insertBefore(newChild, referenceElement);

Lista de métodos e propriedades para procurar elementos no DOM

  1. parentElement:

A propriedade parentElement permite acessar o elemento-pai de um elemento. Com ela, você pode navegar na hierarquia do DOM e obter o pai de um elemento. Por exemplo:

const childElement = document.getElementById('child');

const parentElement = childElement.parentElement;
  1. previousSibling:

A propriedade previousSibling é usada para acessar o nó irmão anterior (anterior na hierarquia do DOM) de um elemento. Essa propriedade considera qualquer tipo de nó, como elementos, textos ou comentários. Por exemplo:

const element = document.getElementById('myElement');

const previousElement = element.previousSibling;
  1. children:

A propriedade children retorna uma coleção de elementos filhos de um elemento. Essa coleção contém apenas os elementos, excluindo qualquer outro tipo de nó que possa existir. Por exemplo:

const parentElement = document.getElementById('parent');

const childrenElements = parentElement.children;

Essas são algumas das formas essenciais para interagir com elementos HTML e navegar no DOM usando JavaScript. Ao dominar essas técnicas, você poderá criar manipulações dinâmicas e complexas em suas páginas da web, tornando suas aplicações mais interativas e envolventes.

Para a conveniência de desenvolvimento, o código possui apenas o necessário para o exemplo, a seguir algumas funções que podem facilitar desenvolvimento futuro. Por exemplo:

function retornarElementoPai(elemento) {

        return elemento.parentElement;

    }

    function retornarTotalElementos(arvore) {

        let totalElementos = 1; // Conta o próprio nó (raiz) da árvore

        function contarRecursivamente(no) {

            for (const filho of no.filhos) {

                totalElementos++;

                contarRecursivamente(filho);

            }

        }

        contarRecursivamente(arvore);

        return totalElementos;

    }

    function retornarProfundidadeNo(elemento, profundidade = 0) {

        if (elemento.parentElement) {

            return retornarProfundidadeNo(elemento.parentElement, profundidade + 1);

        }

        return profundidade;

    }

    function deletarElementoNo(elemento) {

        if (elemento.parentElement) {

            elemento.parentElement.removeChild(elemento);

        }

    }

Outros títulos interessantes:

Conclusão

Aprenda agora a criar uma divisão interativa com quadrantes que se dividem recursivamente, formando uma árvore visualmente atrativa. Aplique cores distintas para cada nível de profundidade na árvore, gerando um gradiente mais intenso à medida que avançamos. Essa técnica, portanto, torna projetos mais dinâmicos e atraentes.

Essa estrutura em árvore é valiosa para estudantes de Ciência da Computação. A abordagem recursiva utilizada para criar e manipular as divisões é especialmente relevante, pois é um dos fundamentos essenciais no aprendizado da programação.

A recursividade mostra como resolver problemas complexos de forma mais eficiente. Com essa técnica, os alunos aprimoram suas habilidades em pensamento lógico, assim, entendem melhor a estruturação de problemas e aprendem a dividir tarefas maiores em etapas menores e mais gerenciáveis.

Portanto, esse exemplo prático de criação de uma divisão interativa com Flex e Árvore em JavaScript oferece uma experiência envolvente no desenvolvimento web, ao mesmo tempo que promove a compreensão dos conceitos essenciais da Ciência da Computação.

Aprenda mais sobre JavaScript lendo outros de nossos artigos, por exemplo: Formulário HTML: criando forms HTML e enviando dados.

Este artigo foi útil?

Obrigado pela resposta!
Picture of Daiana S

Daiana S

Graduada em Letras pelo Instituto Federal da Paraíba e especializada em redação geral. Gosto de escrever sobre tudo e me dedico em vários níveis de expressividade. No geral, todos os meus hobbies giram em torno de escrever alguma coisa e fazer isso bem.

Contato: daiana.blog@homehost.com.br

Ganhe 30% OFF

Indique seu nome e e-mail,e ganhe um cupom de desconto de 30% para sempre na Homehost!