Si può avere visto il trucco di "Inserimento di Div" intrigante mentre navighi sul Web. Gli sviluppatori di creare questo effetto utilizzando Cascading Style Sheets (CSS) per rendere visibili gli elementi invisibili o crearne di nuovi partendo da zero. Un div è un elemento HTML che contiene altri elementi come pulsanti e testo. Imparando a creare elementi div in tempo reale e inserirli in una pagina, è possibile aggiungere un nuovo livello di interattività alle applicazioni Web esistenti.

Istruzioni

1

Aprire Blocco note o un editor HTML e creare un nuovo documento HTML.

2

Aggiungere il seguente codice HTML al documento "< body >" sezione:

< input id = "Textbox1" type = "valore"text = "Questa è una casella di testo" / >

< tipo input = "pulsante" value = "Inserire Div" onclick = "return insertDiv()" / >

Questo crea una casella di testo cui id è "Textbox1." Inserisce inoltre un pulsante nella pagina utilizzato per testare la funzione JavaScript che aggiunge un nuovo div.

3

Aggiungere questa sezione vuota "<" script > sezione "< head >" del documento:

< script type = "text/javascript" >

< / script >

4

Incollare il seguente codice JavaScript prima della chiusura tag "< / script >":

var targetElementID = "Textbox1";

var newDivCSS = "width: 100px; Height: 100px; padding: 10px; colore: rosso; background-color: giallo; stile del bordo: punteggiato; border-width: 2px; ";

var newDivHTML = "Questo è un nuovo div";

var insertionPoint = "prima";

La prima variabile contiene il "id" dell'elemento attorno al quale si desidera inserire un nuovo div. In questo esempio, che l'id è "Textbox1." La variabile "newDivCSS" contiene le descrizioni di stile CSS che determinano come sarà il nuovo div. La variabile successiva "newDivHTML" contiene il codice HTML che si desidera venga visualizzato in div. In questo esempio il valore è "Questo è un nuovo div." Sostituire tale testo con qualcosa che ti piace. L'ultima variabile controlla dove il browser inserisce il nuovo div. I valori possibili sono "prima" e "dopo".

5

Aggiungere questa funzione JavaScript dopo il codice descritto nel passaggio precedente:

Function insertDiv() () {

targetElement = document.getElementById(targetElementID);

var newDivElement = document.createElement('div');

newDivElement.setAttribute ("id", "NewDiv1");

newDivElement.setAttribute ("stile", newDivCSS);

newDivElement.innerHTML = newDivHTML;

newDivElement.setAttribute ("innerHTML", newDivHTML);

Se (insertionPoint = = "prima")

document.body.insertBefore (newDivElement, targetElement);

altro

targetElement.appendChild(newDivElement);

}

Questa funzione crea un nuovo div utilizzando il metodo "createElement" e lo aggiunge all'elemento di destinazione specificato nella variabile "targetElementID" descritta nel passaggio precedente.

6

Salvare il documento HTML e aprirlo in un browser. La casella di testo e un pulsante vengono visualizzati. Fare clic sul pulsante. La funzione JavaScript viene eseguito e inserisce un nuovo div prima casella di testo.

Consigli & Avvertenze

• Il div inserito ha uno sfondo giallo e rosso testo. Questi sono i valori assegnati alle proprietà CSS nella variabile "newDivCSS". Modificare questi valori in qualcosa che ti piace il tuo nuovo div secondo il vostro bisogno di stile. Modificare il valore della variabile "insertionPoint" da "prima" a "dopo" per inserire il nuovo div dopo la casella di testo.