Javascript - como modificar ou criar múltiplos elementos HTML / Talita Burbulhan

Talita Burbulhan

Jornalista. Aprendiz de Python.

Workspace

Published

Edited

Mar 27, 2022

Fork of Javascript - como modificar ou criar múltiplos elementos HTML

</div>

</section>

exemplo1A = () => { // notação do ObservableHQ

/* Javascript */

// Usuário na primeira linha

var usuario = {

nome: "Beatriz",

idade: 42

}

// Seleciona a <div class="nome"> e coloca, dentro dela, o valor da

// propriedade 'nome' do objeto 'usuario'

document.querySelector('#tabela1 .nome').innerHTML = usuario.nome;

document.querySelector('#tabela1 .idade').innerHTML = usuario.idade;

} // notação do ObservableHQ

</div>

</section>

exemplo2A= () => { // notação do ObservableHQ

/* Javascript */

// Array com a lista de letras

var letras = [ "a", "b", "c", "d", "e", "f" ];

// Loop for()

// Executa o código dentro das chaves para cada item na Array letras (letras.length)

for(var i=0; i < 3; i=i+2 ){

// seleciona a linha

var linhaAtual = document.querySelector("#tabela2a > .linha");

// Adicionamos ao innerHTML da linha a nova letra, seguida de um espaço

linhaAtual.innerHTML += letras[i] + " ";

}

} // notação do ObservableHQ

</div>

</div>

</div>

</section>

exemplo2B = () => { // notação do ObservableHQ

/* Javascript */

// Array com a lista de usuários. Cada usuário é um objeto

var usuarios = [

{ nome: "Maria", sobrenome: " Alves", idade: 42 }, // esse objeto é usuarios[0]

{ nome: "Ana", sobrenome: " Oliveira", idade: 29 }, // esse objeto é usuarios[1]

{ nome: "Carlos", sobrenome: " Santos", idade: 30 } // esse objeto é usuarios[2]

];

// A função que será repetida para cada usuário

// o forEach envia automaticamente o parâmetro posicao, que será o index da Array

function exibirNaTabela(usuario, posicao){

// Como a Array começa em 0, somamos 1 para

// pegar o número da linha usada no seletor de css

var numeroDaLinha = posicao + 1;

// Selecionamos o elemento de classe "linha" que esteja na posição definida acima

var linhaAtual = document.querySelector("#tabela2b > .linha:nth-child("+ numeroDaLinha +")");

// Inserimos, dentro dessa linha, o nome do usuário no elemento de classe nome

linhaAtual.querySelector(".nome").innerHTML = usuario.nome + usuario.sobrenome;

linhaAtual.querySelector(".idade").innerHTML = usuario.idade;

}

//exibirNaTabela(usuarios[0], 0);

// Loop forEach

// Para cada usuário na array "usuarios", execute a função "exibirNaTabela"

usuarios.forEach(exibirNaTabela);

} // notação do ObservableHQ

<div class="nome">Usuário</div>

</div>

</section>

exemplo3A = () => { // notação do ObservableHQ

/* Javascript */

// selectiona o elemento class='linha' dentro do elemento '#tabela3a'

var elemento = document.querySelector("#tabela3a > .linha");

// cria uma função que, quando chamada, irá duplicar o elemento e inseri-lo

// no fim da tabela

function duplicaElemento(){

// clona o elemento selecionado com todos os filhos dentro dele

var clonado = elemento.cloneNode(true);

// seleciona o elemento #tabela3a e insere o clone como filho dele

document.querySelector("#tabela3a").appendChild(clonado);

}

// limpa a tabela antes de inserir os elementos

// document.querySelector("#tabela3a").innerHTML = "";

// cria um loop, que repete o código dentro dele

// o número de vezes depende do número que você colocar em "i<3"

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

duplicaElemento();

}

} // notação do ObservableHQ

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.

Learn more