Hur man skriver till en DIV i ett dokument DOM

April 7

Hur man skriver till en DIV i ett dokument DOM


Dynamiskt innehåll generation ger din webbplats möjlighet att ändra i realtid som användare interagerar med webbplatsen. Till exempel, genom att din kod att skriva till div element, du gör det möjligt för besökarna att orsaka en "Tack för ditt köp" meddelande visas i en DIV när de klickar på en "Köp" -knappen. Alla element på en webbsida bor i sidans Document Object Model, eller DOM. Lär dig att manipulera en sidas DOM så att du kan skriva vad som helst till någon DIV inslag när som helst.

Instruktioner

1 Öppna en av dina HTML-dokument med hjälp av en HTML-redigerare eller Anteckningar. Lägg den här koden till dokumentets kroppssektionen:

<Div id = "testDiv1">

originaltexten

</ Div>

<Input type = värde "knappen" = "Skriv text för att DIV" onclick = "return writetext (testDiv1", "Ny text") "/>

<Input type = värde "knappen" = "Skriv HTML till div" onclick = "return writeHTML (testDiv1)" />

Div-elementet, vars text läser "den ursprungliga texten" har ett ID vars värde är "testDiv1." För att skriva till en DIV, måste den ha ett ID för att tillåta JavaScript-funktioner för att lokalisera DIV. Den första knappen har en "onclick" händelse som passerar DIV ID till en JavaScript-funktion tillsammans med den nya texten du vill skriva till DIV. Den andra knappen demonstrerar JavaScript förmåga att skriva HTML till en DIV samt text. Den andra knappens "onclick" händelse passerar DIV ID värde; detta värde är "testDiv1."

2 Klistra in JavaScript-funktionen i dokumentets avsnittet "script":

funktionen writetext (currentDivID, textToWrite) {

var currentDiv = document.getElementById (currentDivID);

currentDiv.innerHTML = textToWrite;

}

Denna funktion, som kallas av den första knappens "onclick" händelse, lokaliserar DIV och byter "innerhtml" egendom till ett värde som skickas till funktionen.

3 Lägg till följande JavaScript-funktionen under den som visas i steg 2:

Funktionen writeHTML (currentDivID) {

var currentDiv = document.getElementById (currentDivID);

var currentHTML = currentDiv.innerHTML;

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

var stringHTML2 = "</ span>";

var newHTMLstring = stringHTML1 + currentHTML + stringHTML2;

currentDiv.innerHTML = newHTMLstring;

}

Denna funktion lokaliserar DIV och hämtar HTML-koden. Det lagrar den koden i variabeln "currentHTML" De närmaste två rader kod definierar ett element "span". Den "stringHTML1" variabel definierar span öppningstaggen och "stringHTML2" variabel definierar dess sluttagg. I detta exempel, de två variablerna skapar ett element "span" som producerar en röd förgrundsfärg och en prickad gräns. Den "newHTMLstring" variabel omger "currentHTML" variabel med span s öppnings- och stängningstaggar.

4 Spara dokumentet och öppna den i en webbläsare. Orden "den ursprungliga texten" visas inuti DIV. Klicka på "writetext" -knappen. De "WRITE" funktions körningar och ersätter den ursprungliga texten med orden "Ny text".

5 Klicka på "writeHTML" -knappen. Den "writeHTML" -funktionen går och ändrar färgen på texten till röd. En prickad ram visas också runt texten.

Tips

  • Den "writeHTML" -funktionen visar att du kan skapa HTML-element, såsom spann, i realtid. Till exempel kan du skapa ett stycke med samma metod och skriva den till en DIV istället för att skriva en spännvidd. För att ta bort allt från DIV, helt enkelt kallar "writetext" -funktionen och passera en tom textsträng till denna funktion.

        

Välkommen till dig för att skicka en kommentar:

            
            
            
            

© 2022 Astrixsoft.com | Contact us: webmaster# astrixsoft.com