Hvordan endre innholdet i en DIV med Javascript

Hvordan endre innholdet i en DIV med Javascript


En av de mest nyttige HTML enheter er DIV blokken. Den tillater utviklere å gruppere knapper, menyer og andre kontroller på en webside. Javascript gjør det mulig for en side for å endre sitt utseende ved å endre innholdet i en DIV blokken. Disse endringene vises umiddelbart, og kan imponere dine besøkende så de ser tekst endring i bilder eller lenker vises fra ingensteds.

Bruksanvisning

1 Start Notepad eller din favoritt HTML editor.

2 Åpne en av HTML-dokumenter, og legge til følgende DIV blokken kode hvor som helst etter den første <body> -taggen:

<Div id = "TestDiv"> <h1> Dette er en overskrift </ h1>

</ Div>

<Input type = "button" value = "Endre Innhold til et bilde" onclick = "return Change_to_Image ()" />

<Input type = "button" value = "Endre Innhold til en link" onclick = "return Change_to_Link ()" />

Dette skaper en DIV hvis ID er TestDIV. Den DIV inneholder en overskrift og to knapper. Den første knappen gjør at DIV overskrift for å endre til et bilde. Den andre knappen forandrer alt inni DIV til en link. Knappene gjør dette ved å ringe Javascript-funksjoner som endrer DIV innhold.

3 Legg denne Javascript-kode til dokumentets Leder seksjon:

<Script language = "javascript" type = "text / javascript">

funksjon Change_to_Image () {

Var divObject = document.getElementById ( "TestDiv");

Var newContent = '<img />';

divObject.innerHTML = newContent;

}

fungere Change_to_Link () {

Var divObject = document.getElementById ( "TestDiv");

Var newContent = "<a href="Visit"> http://www.whitehouse.gov"> Besøk hvite hus nettstedet </a> ';

divObject.innerHTML = newContent;

}

</ Script>

Legg merke til at verdien av newContent i Change_to_Image funksjon. Denne verdien er en HTML-setningen som definerer et bilde. I dette eksemplet, er navnet på det bildet er TestImage.jpg.

4 Erstatt "TestImage.jpg" med navnet på et bilde på harddisken. For eksempel, hvis du har et bilde som heter flowers.gif i en mappe som heter "Nature" på "C" -stasjonen, angi verdien for newContent som følger:

Var newContent = '<img />';

Hvis bildet er på nettet, bruke bildets URL i stedet. Den divObject variable har en referanse til DIV definert i hoveddel. Den siste linjen i funksjonen setter som DIV sin innerhtml eiendom til en verdi av newContent. Siden newContent peker på et bilde, div innhold endres til det bildet når denne funksjonen går.

5 Gjennomgå andre funksjonen, oppkalt Change_to_Link. Denne funksjonen er lik den foregående funksjon. Den eneste forskjellen oppstår på linje to av funksjonen. Koden setter verdien av newContent til et anker tag definisjon. At definisjonen definerer en link til det hvite hus nettstedet.

6 Lagre HTML-dokumentet. Åpne den i nettleseren din. Websiden viser overskriften og de to knappene som er opprettet i forrige trinn.

7 Klikk på "Endre Innhold til et bilde" -knappen. Overskriften endres til et bilde.

8 Klikk på "Endre Innhold til en link" knappen. Bildet endres til en link. Klikk på linken. Nettleseren din navigerer til Det hvite hus nettstedet.

Hint

  • Innerhtml, som vist i dette eksemplet, er en kraftig HTML egenskap. Bruk den til å endre innholdet i en DIV til en gyldig HTML-elementet. For eksempel kan du sette en DIV sin innerhtml annonsen til en kompleks form definisjon inneholder knapper, tekstbokser og etiketter. Brukere kan gjøre at skjemaet vises på innsiden av DIV ved å klikke på en knapp som kalles en Javascript-funksjon. Det funksjon ville sette DIV sin innerhtml verdi til skjemaets HTML definisjon som illustrert i disse trinnene.