Generazione dinamica dei contenuti dà il tuo sito la possibilità di modificare in tempo reale come gli utenti interagiscono con il sito. Ad esempio, attivando il tuo codice per scrivere gli elementi DIV, si rende possibile per i visitatori del sito causare un messaggio di "Thank you for your purchase" vengono visualizzati all'interno di un DIV quando fanno clic sul pulsante "Acquista". Tutti gli elementi in una pagina Web si trovano di pagina Document Object Model, o Dom. imparare a manipolare DOM di una pagina in modo che si può scrivere nulla a qualsiasi elemento DIV in qualsiasi momento.

Istruzioni

1

Aprire uno dei documenti HTML utilizzando un editor HTML o blocco note. Aggiungere questo codice alla sezione body del documento:

< div id = "testDiv1" >

Testo originale

< / div >

< tipo input = "pulsante" value = "Scrivere il testo per Div" onclick = "return writeText ('testDiv1', 'Nuovo testo')" / >

< input type = valore "pulsante" = "Scrivere HTML div" onclick = "return writeHTML('testDiv1')" / >

L'elemento DIV, in cui il testo legge "Testo originale", ha un ID cui valore è "testDiv1." Per scrivere un DIV, deve avere un ID per consentire funzioni di JavaScript individuare DIV. Il primo pulsante presenta un evento "onclick" che passa ID di DIV a una funzione JavaScript insieme con il nuovo testo che si desidera scrivere a DIV. Il secondo pulsante dimostra la capacità di JavaScript di scrivere HTML in un DIV come testo. Evento "onclick" del secondo pulsante passa il valore di ID del DIV; tale valore è "testDiv1."

2

Incollare questa funzione JavaScript nella sezione "script" del documento:

funzione {writeText (currentDivID, textToWrite)

var currentDiv = document.getElementById(currentDivID);

currentDiv.innerHTML = textToWrite;

}

Questa funzione, chiamata dall'evento "onclick" del primo pulsante, individua il DIV e modificare le relative proprietà "innerHTML" al valore passato alla funzione.

3

Aggiungere la seguente funzione JavaScript sotto quello mostrato nel passaggio 2:

function writeHTML(currentDivID) () {

var currentDiv = document.getElementById(currentDivID);

var currentHTML = currentDiv.innerHTML;

var stringHTML1 = "< span style =" color: red; stile del bordo: punteggiato;' > ";

var stringHTML2 = "< / span >";

var newHTMLstring = stringHTML1 + currentHTML + stringHTML2;

currentDiv.innerHTML = newHTMLstring;

}

Questa funzione individua il DIV e recupera il codice HTML. Memorizza tale codice nella variabile denominata "currentHTML" le due righe di codice definiscono un elemento di "span". La variabile "stringHTML1" definisce i tag di apertura dell'arco e la variabile "stringHTML2" il tag di chiusura. In questo esempio, le due variabili creano un elemento di "span" che produce un colore di primo piano rosso e una linea punteggiata. La variabile "newHTMLstring" circonda la variabile "currentHTML" con dell'intervallo apertura e chiusura tag.

4

Salvare il documento e aprirlo in un browser. Le parole "Testo originale" appaiono dentro il DIV. Click pulsante "writeText". La funzione di "writeText" corre e sostituisce il testo originale con le parole "Nuovo testo".

5

Fare clic sul pulsante "writeHTML". La funzione di "writeHTML" viene eseguita e cambia il colore del testo in rosso. Un bordo punteggiato appare anche intorno al testo.

Consigli & Avvertenze

• La funzione di "writeHTML" dimostra che è possibile creare elementi HTML, ad esempio campate, in tempo reale. Ad esempio, si potrebbe creare un paragrafo utilizzando lo stesso metodo e scriverli in un DIV anziché scrivere un arco. Per eliminare tutto da un DIV, semplicemente chiamare la funzione di "writeText" e passare una stringa di testo vuota a tale funzione.