Ir ao conteúdo
  • Cadastre-se
Reberth Siqueira

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

Posts recomendados

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?

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

  • Curtir 1
  • Amei 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

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 😕

Compartilhar este post


Link para o post
Compartilhar em outros sites

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);} 

 

  • Curtir 2

Compartilhar este post


Link para o post
Compartilhar em outros sites
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

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

Aprenda_a_Ler_Resistores_e_Capacitores-capa-3d-newsletter.jpg

EBOOK GRÁTIS!

CLIQUE AQUI E BAIXE AGORA MESMO!