Hvordan legge en DIV inn i en annen DIV Dynamisk

January 16

Dynamiske websider reagerer på brukerundersøkelser og endre innholdet på siden. Flere skriptspråk kan oppnå denne effekten. En av de enkleste og mest populært å bruke er Javascript. Den lar deg endre innholdet av elementene i HTML, slik som divs (beholdere med innhold), basert på en handling, for eksempel klikke eller svever en mus. Et museklikk kan opprette en ny div inni en eksisterende, generere innhold relatert til knappen klikkes. Følg noen skritt for å oppnå denne effekten.

Bruksanvisning

1 Lag en div mellom body-kodene på websiden, og gi div en ID fra "gamle div." Også opprette en knapp for brukerne til å klikke som utløser Javascript-funksjonen "newInnerDiv." Koden vil se slik ut:

<Body>

</ Div>

<-knappen Type = "button" class = "button" onclick = "newInnerDiv ()"> Legg Div </ knapp>

</ Body>

2 Lag funksjonen "newInnerDiv" mellom hodet koder i dokumentet. Funksjonen blir den eksisterende div etter sin ID "oldDiv," skaper en ny div element, skaper en ny p (avsnitt) element og skaper en tekststreng med "Hei" for å plassere i p-element. Det føyer den gamle div med den nye div element, setter ID av den nye div til "newDiv," tilføyer nye div med den nye p element og føyer til det nye p element med den nye tekststreng med "Hei".

Legg en test ved starten av funksjonen for å sjekke om denne DIV allerede ble opprettet en gang av brukeren klikke på knappen. Du trenger ikke å opprette flere divs. En enkel test for dette eksempelet er å telle hvor mange divs eksisterer. Dersom antallet divs som ligger på siden er lik en, går kode:

fungere newInnerDiv () {

Var checkDiv = document.getElementsByTagName ( "div");

Var divNumber = (checkDiv.length);

if (divNumber == 1) {

Var changeContent = document.getElementById ( "oldDiv");

Var addDiv = document.createElement ( "div");

Var newPara = document.createElement ( "p");

Var newText = document.createTextNode ( "Hi");

changeContent.appendChild (addDiv);

addDiv.setAttribute ( "id", "newDiv");

addDiv.appendChild (newPara);

newPara.appendChild (newText);}

}

</ Script>

3 Legg noen stiler for både divs mellom hodet kodene slik at divs er lett å se når du tester funksjonen. En utrangert div røde og den nye div mindre og gul. Kast i noen padding for knappen og p elementer, om ønskelig:

oldDiv {width: 200px; height: 90px; border: thin solid black; padding: 0 5px 5px 5px; background-color: red; position: relative; } NewDiv {background-color: gul; width: 180px; margin: 10px; position: absolute; }

.button {margin: 20px 0 0 0; }

p {position: relative; float: left; padding: 10px; }

</ Style>

4 Lagre siden og åpne den i en nettleser. En rød, tom boks vises. Klikk på knappen, og den nye div genereres, angitt med sin gule farge og sin tekst med "Hei". Se "genererte kildekoden," hvis det er tilgjengelig på nettleseren, for å se den nye div og innholdet i den gamle div i HTML-koding.

Den fulle koden vises som følger:

<Html>

<Head>