Javascript Como realizar o appendChild de um elemento em varias partes do documento?

[Reberth Siqueira]

Eu tenho um elemento X

 

let X = document.createElement("div");

 

Quando eu faço isso:

 

body.appendChild(x);
body.appendChild(x);
body.appendChild(x);

 

Só aparece o elemento X apenas 1 vez na página.

 

X

 

Eu não entendo porque acontece isto. Eu gostaria de poder "appendar" copias do elemento no mesmo documento.

 

É possível?

[ezequiel972]

@Reberth Siqueira quando você faz

X = document.createElement("div");

você cria um elemento e salva na variável X uma referencia a este elemento, 

você não pode colocar um mesmo elemento em dois lugares ao mesmo tempo, para fazer o que você quer,
você precisa criar um novo elemento com as mesmas características ou clonar o primeiro elemento.

 

document.body.appendChild(X.cloneNode(true));

usando o exemplo acima você clona seu elemento e pode  anexar cada copia onde for preciso.

[Reberth Siqueira]

@ezequiel972

 

Deu certo cara!!!

 

Muito obrigado.

[Reberth Siqueira]

Boa tarde!! Tudo bem??

 

Estou voltando pra dizer que estou tendo problemas para settar eventos:

 

Se eu setto algum evento no elemento X:

x.onclick = () => {
console.log("hey");
}

e realizar  o appendChild como informado:

 

document.body.appendChild(x);
document.body.appendChild(x.cloneNode(true));
document.body.appendChild(x.cloneNode(true));

 

Se eu clicar no primeiro elemento que foi anexado ao document.body a mensagem será printada no console. Mas se eu clicar nas outras duas depois, nada acontece.

 

já tentei algumas coisas e mesmo assim nao deu

[ezequiel972]

caro @Reberth Siqueira, boa noite!!

 quando clonamos um objeto usando x.cloneNode(true), nos criamos um objeto irmão do primeiro com as mesmas propriedades, exceto pelos listners que  nao sao copiados e precisam ser adicionados novamente a cada objeto.

segue ex.

X = document.createElement("div");	// cria o elemento div
X.classList.add("classteste");		// add a class nele

document.body.appendChild(X.cloneNode(true)); // clona e anexo o elemento
document.body.appendChild(X.cloneNode(true));
document.body.appendChild(X.cloneNode(true));
document.body.appendChild(X.cloneNode(true));
document.body.appendChild(X.cloneNode(true));

elementList = document.querySelectorAll(".classteste");	//seleciona todos elementos pela class, retorna um array de elementos 
for(i=0 ; i<elementList.length ; i++){ // repassa cada elemento do array e adiciona o listner nele
	console.log(elementList[i]);
  elementList[i].addEventListener("click", function(e){ //preferivel usar addEventListener a   element.onclick = function(). 
  	console.log(e);
  }, false);} 

 

[Reberth Siqueira]

@ezequiel972  Beleza! Vou tentar criar algo parecido.

[Reberth Siqueira]

Em 17/12/2019 às 22:07, ezequiel972 disse:

caro @Reberth Siqueira, boa noite!!

 quando clonamos um objeto usando x.cloneNode(true), nos criamos um objeto irmão do primeiro com as mesmas propriedades, exceto pelos listners que  nao sao copiados e precisam ser adicionados novamente a cada objeto.

segue ex.

X = document.createElement("div");	// cria o elemento div
X.classList.add("classteste");		// add a class nele

document.body.appendChild(X.cloneNode(true)); // clona e anexo o elemento
document.body.appendChild(X.cloneNode(true));
document.body.appendChild(X.cloneNode(true));
document.body.appendChild(X.cloneNode(true));
document.body.appendChild(X.cloneNode(true));

elementList = document.querySelectorAll(".classteste");	//seleciona todos elementos pela class, retorna um array de elementos 
for(i=0 ; i<elementList.length ; i++){ // repassa cada elemento do array e adiciona o listner nele
	console.log(elementList[i]);
  elementList[i].addEventListener("click", function(e){ //preferivel usar addEventListener a   element.onclick = function(). 
  	console.log(e);
  }, false);} 

 

 

Bom dia Ezequiel!

 

Só passando aqui pra avisar que criei um bloco de código  que a função dele é anexar um novo formulário na pagina através do DOM para cada novo evento de click em um botão.

Eu criei um método que cria o formulário e configura as proriedades do formulário (inclusive o botão que vai ser clicado), e ao utilizar o addEventListener eu tive um problema o qual o mesmo acumulava novos métodos no botão.

O mesmo botão era utilizado nos outros forms, acho que foi por isso que foi acumulando os eventos de click.

 

Então eu aprendique o AddEventListener não sobrepoe os eventos anteriores. Muito legal