F�rum Inserir DIV�s dinamicamente com JavaScript #477190

25/04/2014

Fala galera, gostaria de dentro de uma DIV, criar DIV�s dinamicamente, ou seja, quando o usu�rio clicar em criar, criar� uma div (no formato de linha) e ainda conseguirei criar mais linhas, n�o havendo limites... Segue o c�digo:

<html>
<head><title></title>

<script>
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script type="text/javascript">


var i=1;

var BoxPrincipal=document.getElementById("BoxPrincipal");
var textoLbl =document.createElement("div");
textoLbl.setAttribute("id", "item_id_"+i);
var previa=document.createElement("div");
previa.setAttribute("id", "previa_item"+i);
var mudar=document.createElement("div");
mudar.setAttribute("div","mudar_item"+i);
DivPrincipalSet.FUNCAOINSERIR_NAO_SEI_QUAL_�();
++id;
}
</script>
</head>
<body>
<div id="BoxPrincipal">
	Aqui ir� criar todas as divs automaticamente
	
	<!-- 
	O FORMATO SERIA MAIS OU MENOS ESTE
	
	<div class="Linha" style="width:600px;">
		<div class="textoBox" style="display:table-cell;width:99%">
		div texto
		</div>
		<div class="mostraBox" style="display:table-cell;width:20px;vertical-align:middle;">
		div mostra
		</div>
		<div class="mudarBox" style="display:table-cell;width:20px;vertical-align:middle;">
		div mudar
		</div>
		<div class="excluirBox" style="display:table-cell;width:20px;vertical-align:middle;">
		div excluir
		</div>
	
	
	-->
	
</DIV>

</body>
</html>

Wagner Morandi

Curtir t�pico

+ 0

Responder

Post mais votado

25/04/2014

Ol� Wagner, como vai? Vou simplificar um pouco a resposta usando jQuery, ok?

HTML com o bot�o criar e a div que vai receber as "div linhas"

<button id='criarLinha'>Criar uma nova linha</button>

<div class="Linha" style="width:600px;">
<!-- RECEBE DIVS DINAMICAS -->
</div>


$(document).ready(function(){
var divPai = $('.Linha');
var btnCriar = $('#criarLinha');

btnCriar.click(function(){
    divPai.append("<div class='textoBox' style='display:table-cell;width:99%'>div texto</div>");
    divPai.append("<div class='mostraBox' style='display:table-cell;width:20px;vertical-align:middle;'>div mostra</div>");
    divPai.append("<div class='mudarBox' style='display:table-cell;width:20px;vertical-align:middle;'>div mudar</div>");
    divPai.append("<div class='excluirBox' style='display:table-cell;width:20px;vertical-align:middle;'>div excluir</div>");
});

});

Lembrando que essa solu��o precisa do jQuery

Raphael Souza

Responder

Gostei + 2