Script javascript: Aggiungere elementi a una pagina web

   difficoltà:  script script script script script

Demo
Download
Script simili
21/12/2006


Con questo script javascript potremo aggiungere dinamicamente degli elementi DIV all'interno di un div contenitore, creando nuovi nodi alla pressione di un pulsante.

Ecco il codice (di seguito la spiegazione):

<html>
<head>
<script>
function crea(){
	nuovo_elemento = document.createElement("div");
	nuovo_elemento.setAttribute("id","quadro"+parseInt(document.getElementById("container").childNodes.length+1));
	nuovo_elemento.setAttribute("class","quadrato");
	now= new Date();
	nuovo_elemento.innerHTML=now.toLocaleString();
	document.getElementById("container").appendChild(nuovo_elemento);
	obj=eval("document.getElementById(\"quadro"+parseInt(document.getElementById("container").childNodes.length)+"\")");
	obj.style.height="30px";
	obj.style.width="700px";
	obj.style.border="1px solid red";
	obj.style.margin="0px";
	
}
</script>
</head>
<style>
	div.container{width: 700px; margin: 0px auto 0px;}
	div.quadrato{border:1px solid red; height: 30px; width: 700px; margin: 0px;}
</style>
<body>
<a href="#" onclick="crea()">crea elemento</a>
<div class="container" id="container"/>
</body>
</html>

Vediamo ora che succede.
nuovo_elemento = document.createElement("div");
nuovo_elemento.setAttribute("id","quadro"+parseInt(document.getElementById("container").childNodes.length+1));
nuovo_elemento.setAttribute("class","quadrato");
In questo modo creo un nuovo elemento DIV e gli setto due attributi. L'id e la classe.
L'id lo creo univoco aggiungento alla voce quadro il numero di ordine in cui si trova all'interno del contenitore (nota: internet explorer conta da 0 e firefox da 1)

now= new Date();
nuovo_elemento.innerHTML=now.toLocaleString();
Aggiungo il contenuto al DIV, in questo caso la data.

document.getElementById("container").appendChild(nuovo_elemento);
Aggiungo l'elemento al fondo all'interno del contenitore.

Sarebbe finita qui se non che internet explorer nonostante abbiamo attribuito la classe all'oggetto non lo disegna con lo stile appropriato.
Diamo lo stile all'oggetto allora tramite javascript:
obj=eval("document.getElementById(\"quadro"+parseInt(document.getElementById("container").childNodes.length)+"\")");
obj.style.height="30px";
obj.style.width="700px";
obj.style.border="1px solid red";
obj.style.margin="0px";



Permalink:
Script javascript: Aggiungere elementi a una pagina web
Tag:
script   javascript   dom  
Script Simili:
Script ajax: Aggiungere elementi a una pagina web con scriptaculous
Script ajax: Aggiungere e rimuovere elementi ordinabili con scriptaculous
Script ajax: Drag and drop scriptaculous con aggiunta finestre e memoria posizione
Script ajax: Drag and drop scriptaculous con memoria posizione in asp
Script ajax: Drag and drop con scriptaculous in orizzontale
Link utili:
Script ajax
Guida DOM (Html.it)
Tools:
Feed RSS     Demo   Download  
Vota:



Commenti


  EVELINA

7/4/2007 12:34:45

salve mi stò incasinando la vita,da quando mi son fatta il blog nn riesco più ad aggiungere nulla....non mi appare più la scritta aggiungi elemento...in basso mi appare javascript....ma nulla...cosa può essere successo???

  Raffaele

8/4/2008 9:06:57

Ottimo Script, ma se lo stesso lo vorrei utilizzare per rimuovere questo elemento inserito? Come dovrei fare?

  Fabio

8/4/2008 9:17:52

Guarda qui:
Aggiungere e rimuovere elementi

  Raffaele

8/4/2008 11:54:17

Già avevo visto quest'esempio, ma non va bene. Grazie per l'interessamento :)

  Raffaele

9/4/2008 22:50:45

Scusate se vi scrivo quì, ma forse questo mio problema, potrebbe servire anche a qualcun altro. Ho svolto lo script illustrato nell'esempio, in questo modo:



	nuovo_elemento = document.createElement("div");

	nuovo_elemento.setAttribute("id","quadro"+parseInt(document.getElementById("container").childNodes.length+1));

	nuovo_elemento.setAttribute("class","quadrato");

	nuovo_elemento.innerHTML="<p>Numero   1= <input type="+"text"+"name=Numero1"+"</p>";

	document.getElementById("container").appendChild(nuovo_elemento);

	obj=eval("document.getElementById(\"quadro"+parseInt(document.getElementById("container").childNodes.length)+"\")");

	obj.style.height="30px";

	obj.style.width="850px";

	obj.style.border="0px";

	obj.style.margin="0px";

<style>

	div.container{width: 700px; margin: 0px auto 0px;}

	div.quadrato{border:0px; height: 30px; width: 850; margin: 0px;}

</style>

						<td width="850" colspan="2"><div class="container" id="container"></td>

Ora voglio eliminare quest'elemento creato. Come devo fare?
Tenete presente che sto realizzando la pagina in ASP. Saluti :)

  Fabio

10/4/2008 0:37:35

Riesci a risolvere guardando lo script che ti ho detto prima..
cmq per eliminare un div all'interno di un altro puoi usare removeChild. Ad es:



<div id="container">aa<div id="quadro3">aa</div></div>

<script>	document.getElementById("container").removeChild(document.getElementById("quadro3"));

</script>




  luca

5/3/2009 0:01:01

salve qualcuno sa indicarmi uno script in java dove un immagine da puntino si allarga sempre più sino a creare un quadrato?



Lascia un commento


Inserire il codice visualizzato nell'immagine*:
codice
Nome*:
Email/Link:
Testo*:
 
I campi contrassegnati con * sono obbligatori.