Siti Web dinamici reagire all'input dell'utente e modificare il contenuto della pagina. Diversi linguaggi di scripting possono ottenere questo effetto. Uno dei più semplice e più popolare di utilizzare è JavaScript. Consente di modificare il contenuto degli elementi in HTML, ad esempio div (recipienti di contenuto), basato su un'azione, ad esempio cliccando o passando un mouse. Un clic del mouse è possibile creare un nuovo div all'interno di uno esistente, generazione di contenuto relazionato al pulsante selezionato. Seguire alcuni passi per ottenere questo effetto.

Istruzioni

1

Creare un div tra i tag body della pagina Web e dare il div ID "vecchio div." Anche creare un pulsante per gli utenti a fare clic su tale trigger la funzione JavaScript "newInnerDiv." Il codice verrà visualizzato come segue:

< corpo >

< div id = "oldDiv" >

< / div >

< pulsante di tipo = "button" class = "button" onclick="newInnerDiv()" > aggiungere Div < / button >

< / body >

2

Creare la funzione "newInnerDiv" tra i tag head del documento. La funzione ottiene il div esistente mediante il relativo ID di "oldDiv", crea un nuovo elemento div, crea un nuovo elemento di p (paragrafo) e crea una stringa di testo di "Hi" da collocare all'interno dell'elemento p. Si aggiunge il div vecchio con il nuovo elemento div, imposta l'ID del div nuovo a "newDiv", aggiunge il nuovo div con il nuovo elemento di p e aggiunge il nuovo elemento di p con la nuova stringa di testo di "Ciao".

Aggiungere un test all'inizio della funzione per verificare se questo div già è stato creato una volta dall'utente facendo clic sul pulsante. Non c'è bisogno di creare più div. Un semplice test per questo esempio è contando quanti divs esiste. Se i numeri di div attualmente nella pagina è uguale a 1, il codice viene eseguito:

< script type = "text/javascript" >

Function newInnerDiv() () {

var checkDiv=document.getElementsByTagName("div");

var divNumber=(checkDiv.length);

Se (divNumber = = 1) {

var changeContent=document.getElementById("oldDiv");

var addDiv=document.createElement("div");

var newPara=document.createElement("p");

var newText=document.createTextNode("Hi");

changeContent.appendChild(addDiv);

addDiv.setAttribute("id","newDiv");

addDiv.appendChild(newPara);

newPara.appendChild(newText);}

}

< / script >

3

Aggiungere alcuni stili per entrambi divs tra i tag head così i div sono facili da vedere quando la funzione di prova. Fare il vecchio div rosso e il nuovo div più piccolo e giallo. Gettare qualche imbottitura per gli elementi button e p, se lo si desidera:

< style type = "text/css" >

oldDiv {width: 200px; altezza: 90px; border: sottile tinta nero; padding: 0 5px 5px 5px; background-color: red; Posizione: parente; } newDiv {background-color: giallo; width: 180px; margin: 10px; posizione: absolute;}

tasto {margin: 20px 0 0 0;}

p {posizione: relative; float: left; padding: 10px;}

< / stile >

4

Salvare la pagina e aprirlo in un browser Web. Un rosso, viene visualizzata la casella vuota. Fare clic sul pulsante, e il nuovo div viene generato, indicato dal suo colore giallo e il testo di "Ciao". Mostra "generato dal codice sorgente," se disponibile sul browser, per vedere il nuovo div e il suo contenuto all'interno del vecchio div nel codice HTML.

Il codice completo viene visualizzato come segue:

< html >

< head >

< style type = "text/css" >

oldDiv {width: 200px; altezza: 90px; border: sottile tinta nero; padding: 0 5px 5px 5px; background-color: red; Posizione: parente; } newDiv {background-color: giallo; width: 180px; margin: 10px; posizione: absolute;}

tasto {margin: 20px 0 0 0;}

p {posizione: relative; float: left; padding: 10px;}

< / stile >

< script type = "text/javascript" >

Function newInnerDiv() () {

var checkDiv=document.getElementsByTagName("div");

var divNumber=(checkDiv.length);

Se (divNumber = = 1) {

var changeContent=document.getElementById("oldDiv");

var addDiv=document.createElement("div");

var newPara=document.createElement("p");

var newText=document.createTextNode("Hi");

changeContent.appendChild(addDiv);

addDiv.setAttribute("id","newDiv");

addDiv.appendChild(newPara);

newPara.appendChild(newText);}

}

< / script >

< / head >

< corpo >

< div id = "oldDiv" >

< / div >

< pulsante di tipo = "button" class = "button" onclick="newInnerDiv()" > aggiungere Div < / button >

< / body >

< / html >