Come scrivere un DIV in un DOM documento

September 16

Come scrivere un DIV in un DOM documento


Contenuto dinamico generazione dà al vostro sito web la flessibilità di modificare in tempo reale come gli utenti interagiscono con il sito. Ad esempio, abilitando il codice per scrivere a div elementi, si rendono possibile per i visitatori del sito per causare un "Grazie per il vostro acquisto" messaggio appaia all'interno di un DIV quando si fa clic su un pulsante "Acquista". Tutti gli elementi di una pagina Web si trovano nella Document Object Model della pagina, o DOM. Imparare a manipolare DOM di una pagina in modo che si può scrivere qualsiasi cosa a qualsiasi elemento DIV in qualsiasi momento.

istruzione

1 Aprire uno dei documenti HTML utilizzando un editor HTML o Notepad. Aggiungere questo codice alla sezione corpo del documento:

<Div id = "testDiv1">

Testo originale

</ Div>

<Input type = valore "pulsante" = "Scrittura di testo per div" onclick = "return writeText ( 'testDiv1', 'Nuovo testo')" />

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

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

2 Incolla questo funzione JavaScript nella sezione "script" del documento:

Funzione writeText (currentDivID, textToWrite) {

var currentDiv = document.getElementById (currentDivID);

currentDiv.innerHTML = textToWrite;

}

Questa funzione, chiamata da evento "onclick" il primo pulsante, individua il DIV e cambia la sua proprietà "innerHTML" per il valore passato alla funzione.

3 Aggiungere la seguente funzione JavaScript sotto quella mostrata nella Fase 2:

Funzione writeHTML (currentDivID) {

var currentDiv = document.getElementById (currentDivID);

var = currentHTML currentDiv.innerHTML;

var stringHTML1 = "<span style = 'color: red; border-style: punteggiato;'>";

var stringHTML2 = "</ span>";

var = newHTMLstring stringHTML1 + currentHTML + stringHTML2;

currentDiv.innerHTML = newHTMLstring;

}

Questa funzione individua il DIV e recupera il suo codice HTML. Memorizza che il codice nella variabile denominata "currentHTML" Le prossime due righe di codice definiscono un elemento di "span". La variabile "stringHTML1" definisce tag di apertura della calibrazione e la variabile "stringHTML2" definisce il suo tag di chiusura. In questo esempio, i due variabili creano un elemento "span" che produce un colore di primo piano rosso e un bordo punteggiato. La variabile "newHTMLstring" circonda la variabile "currentHTML" con apertura e chiusura tag della campata.

4 Salvare il documento e aprirlo in un browser. Le parole "testo originale" appaiono all'interno del DIV. Fare clic sul pulsante "writeText". I "WRITETEXT" corre funzione e sostituisce il testo originale con le parole "nuovo testo."

5 Fare clic sul pulsante "writeHTML". La funzione "writeHTML" corre e cambia il colore del testo su rosso. Un bordo tratteggiato appare anche intorno al testo.

Consigli e avvertenze

  • La funzione "writeHTML" dimostra che è possibile creare elementi HTML, come le campate, in tempo reale. Ad esempio, è possibile creare un paragrafo utilizzando lo stesso metodo e scrivere su un DIV invece di scrivere un arco. Per eliminare tutto da un DIV, è sufficiente richiamare la funzione "writeText" e passare una stringa di testo vuota a quella funzione.