Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

FabianoSouza

Criar DIVs dentro de outra com JS

Por , em Javascript

Recommended Posts

FabianoSouza    5

FabianoSouza
Postado

No HTML é simples.

 

<div id=A>

 

 

<div id=B></div>

 

<div id=C></div>

 

</div>

 

 

Como reproduzo isso no Javascript??

 

Tô confuso com appendChild, childNodes e por ai vai...não consigo montar uma hierarquia das DIVS A, B e C.

 

window.onload = function(){
       var box = document.getElementById("box");
       box.onclick = function()

{
   var div_box  = document.createElement("div");
               div_box.innerHTML = "BOX!!!!"
   div_box.style.backgroundColor="red"
   div_box.style.height="250px";
   this.appendChild(div_box);[/color][/size]

[size="4"][color="#ff0000"]  {

   var div  = document.createElement("div");
               div.innerHTML = "Header";
   div.className="autocompletar_header";
   this.appendChild(div_box);

   var div2  = document.createElement("div2");
               div2.innerHTML = "Conteudo"
   div2.className="autocompletar_conteudo_principal";
               this.appendChild(div2);


       };
};
};

 

Obrigado

 

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vadio    13

Vadio
Postado

appendChild = anexarFilho

childNodes = Nós Filhos

var box = document.getElementById("box");
box.onclick = function(e){
   var A, B, C;
   //criando divs
   A = document.createElement("div");
   A.setAttribute('id','A');
   A.setAttribute('class','classeDoElementoA');

   B = document.createElement("div");
   B.setAttribute('id','B');

   C = document.createElement("div");
   C.setAttribute('id','C');

   //inserindo dados hierarquia: PAI > A > B > C
   this.appendChild(A); //elemento pai "box" recebe A
   A.appendChild(B); // A anexa B
   B.appendChild(C); // B anexa C
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

FabianoSouza    5

FabianoSouza
Postado

appendChild = anexarFilho

childNodes = Nós Filhos

var box = document.getElementById("box");
box.onclick = function(e){
   var A, B, C;
   //criando divs
   A = document.createElement("div");
   A.setAttribute('id','A');
   A.setAttribute('class','classeDoElementoA');

   B = document.createElement("div");
   B.setAttribute('id','B');

   C = document.createElement("div");
   C.setAttribute('id','C');

   //inserindo dados hierarquia: PAI > A > B > C
   this.appendChild(A); //elemento pai "box" recebe A
   A.appendChild(B); // A anexa B
   B.appendChild(C); // B anexa C
}

 

Olá EricRF. Obrigado pela ajuda. Mas não está rodando. Será que não estou chamando corretamente? Veja como está meu HTML.

 

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]">
<html xmlns="[url="http://www.w3.org/1999/xhtml"]http://www.w3.org/1999/xhtml[/url]">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<script type="text/javascript">
var box = document.getElementById("box");
box.onclick = function(e){
   var A, B, C;
   //criando divs
   A = document.createElement("div");
   A.setAttribute('id','A');
   A.setAttribute('class','autocompletar_header');

   B = document.createElement("div");
   B.setAttribute('id','B');

   C = document.createElement("div");
   C.setAttribute('id','C');

   //inserindo dados hierarquia: PAI > A > B > C
   this.appendChild(A); //elemento pai "box" recebe A
   A.appendChild(B); // A anexa B
   B.appendChild(C); // B anexa C
}

</script>
<link href="../../../../CSS/principal.css" />
</head>

<body>


<div id="box" onclick="e()">sdsad</div>


</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Vadio    13

Vadio
Postado 

function box(element){
           var A, B, C;
           //criando divs
           A = document.createElement("div");
           A.setAttribute('id','A');
           A.setAttribute('class','autocompletar_header');

           B = document.createElement("div");
           B.setAttribute('id','B');

           C = document.createElement("div");
           C.setAttribute('id','C');


           //inserindo dados hierarquia: PAI > A > B > C
           element.appendChild(A); //elemento pai "box" recebe A
           A.appendChild(B); // A anexa B
           B.appendChild(C); // B anexa C
       }

 

<div id="box" onclick="box(this);"><span>asd</span></div>

Compartilhar este post

Link para o post
Compartilhar em outros sites

FabianoSouza    5

FabianoSouza
Postado

Opa! Funcionou. Valeu.

 

Agora estou tendando fazer com que estas DIVs (A, B e C) sejam criadas num ponto específico da página.

 

Para isso estou tentando usar 

 document.body.insertBefore(div_A, id_da_caixa_texto);

.

 

Mas sem sucesso...

 

Quero que as DIVs sejam inseridas antes de uma caixa de texo. Como faço isso?

 

 

Brigado

 

 

:-)

Compartilhar este post

Link para o post
Compartilhar em outros sites

Rubens De Andrade Garcia    1

Rubens De Andrade Garcia
Postado

Cara ve se esse código te ajuda no que você precisa!

<html>
<head>
<title>Add DIV em qualquer elemento</title>
</head>
<body>
<div>Click me!</div>
<div>Me clicka !</div>
<div>Oi</div>
</body>
<script type="text/javascript">

var addDiv = function(el){

		var A, B, C;
			//criando divs
			A = document.createElement("div");
			A.setAttribute('id','A');
			A.setAttribute('class','autocompletar_header');

			B = document.createElement("div");
			B.setAttribute('id','B');

			C = document.createElement("div");
			C.setAttribute('id','C');


			/*inserindo dados hierarquia: PAI > A > B > C*/
			el.appendChild(A); //elemento pai "box" recebe A
			A.appendChild(B); // A anexa B
			B.appendChild(C); // B anexa C

};


var getEl = document.body.getElementsByTagName('*'); // pegamos todas as tags do documentos
var getTag = getEl.length; // verificamos quantas tag's foram pegas	
var main = function(){

	/* percorremos todas as tag's que foram retornadas pelo getElementsByTagName *
	*  e verificamos se alguma delas foi clickada, caso sim executar a função    * 
	*  de adicionar as demais div                                               */   

	for(i=0; i<getTag; i++){
		getEl[i].onclick = function(){
			addDiv(this);
		};
	}

};

main();


</script>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito