Hvordan du bytter innerhtml av en DIV Med innerhtml av annen DIV

Vellykket webutviklere forstå viktigheten av å kunne flytte innholdet i en side objekt til et annet. DIV elementer, for eksempel tjene som beholder objekter for overskrifter, menyer og andre elementer. Noen divs kan inneholde objekter, mens andre kanskje ikke. Man kan gjøre objektene i en DIV vises i en annen DIV ved å erstatte den innerhtml av målet DIV med den til kilden.

Bruksanvisning

1 Start din HTML-editor eller tekst editor. Bruk den til å åpne et HTML-dokument.

2 Legg til følgende kode til at dokumentets hoveddel:

<Div id = "div1">

<H1> Dette er en overskrift Inside DIV 1 </ h1>

</ Div>

<Div id = "DIV2">

<H1> Dette er en overskrift Inside DIV 2 </ h1>

</ Div>

<Input type = "button" value = "ReplaceHTML" onclick = "replaceHTML ( 'div1', 'DIV2')" />

Dette skaper to DIV elementer. Hver DIV inneholder en unik posisjon. Knappen nedenfor divs kaller "replaceHTML" -funksjonen og sender ID-verdiene av disse divs til funksjonen.

3 Tilsett "replaceHTML" -funksjonen til dokumentets manuset seksjonen som vist nedenfor:

funksjon replaceHTML (ID1, ID2) {

Var obj1 = document.getElementById (ID1);

Var obj2 = document.getElementById (ID2);

obj1.innerHTML = obj2.innerHTML;

}

Denne funksjonen oppnår referanser til de to divs og setter innerhtml av den første DIV med den for andre.

4 Lagre dokumentet og vise den i en nettleser. De to divs vises på websiden.

5 Klikk på knappen. Koden kjøres og erstatter innholdet i den første DIV med den for andre. De første DIV er overskriften endres til "Dette er en overskrift Inne DIV."

Hint

• Legg merke til rekkefølgen som knapp klikk hendelsen passerer ID-verdiene av de to DIV elementer. Javascript-funksjonen erstatter innholdet på den første DIV i argumentlisten med andre DIV innhold. For å erstatte det andre innholdet DIV i stedet, snu rekkefølgen av disse elementene i argumentlisten slik: <input type = "button" value = "ReplaceHTML" onclick = "replaceHTML ( 'DIV2', 'div1')" />