Hvordan erstatte barnet noder i Javascript

Hvordan erstatte barnet noder i Javascript


Noder gjør det mulig for websider å eksistere. Objekter på en webside, for eksempel knapper, avsnitt og tekst er faktisk elementer som kalles "noder". En forelder "avsnitt" node, for eksempel kan inneholde en datternode som består av et spenn. Webutviklere kombinere ulike typer noder på en side for å lage alt du ser på Internett. Javascript gjør det mulig å erstatte barnet noder med nye. Dette gir deg muligheten til å lage websider morph og endre i sanntid som brukerne se sidene dine.

Bruksanvisning

1 Åpne HTML-dokument ved hjelp av en HTML-editor eller Notisblokk.

2 Legg til følgende kode til at dokumentets "body" -delen:

<P id = "Overordnet1"> Tekst i foreldrenoden

<Span id = "child1">

Original tekst i barnenode

</ Span>

</ P>

<Input id = "Button1" type = "button" value = "button" onclick = "return replaceChildNode ()" />

Dette skaper et avsnitt. Dens id verdien er "Overordnet1" og teksten lyder: "Tekst i foreldrenoden." Inne i denne paragraf er et spenn som id er "child1." Dette span er et barn node av avsnittet. Teksten i denne barnenode leser, "Original tekst i barnets node." Bruke "replaceChild" metoden, vil du erstatte dette barnet noden med en ny en som inneholder forskjellig tekst. Det er vist i siste linje med kode knappen kaller Javascript-funksjonen som utfører "replaceChild" metoden.

3 Legg til følgende Javascript-funksjonen som heter "replaceChildNode" til dokumentets "head" -seksjonen:

<Script type = "text / javascript">

funksjon replaceChildNode () {

Var newChild = document.createElement ( "span");

Var text = document.createTextNode ( "Ny tekst i et nytt barn node");

newChild.appendChild (tekst);

Var forelder = document.getElementById ( "Overordnet1");

Var barn = document.getElementById ( "child1");

Var val = parent.replaceChild (newChild, barn);

}

</ Script>

Den første linjen med kode i funksjonen oppretter et nytt barn node kalt "newChild." Det gjør at du bruker "createElement" metoden. Denne nye barnenode er en "span" fordi "koden passerer" span "til" createElement "metoden. De neste to linjer med kode legge til tekst i spennet. Den teksten lyder:" Ny tekst i et nytt barn node. " de to neste uttalelser få referanser til "Overordnet1" og "child1" elementer laget i kroppen. det er de ledd og spennelementer. den siste linje med kode utfører "replaceChild" -metoden og erstatter den opprinnelige barnenode med den nye .

</ Script>

4 Lagre dokumentet og åpne den i en nettleser. Du vil se avsnitt tekst og tekst fra span under. At teksten i span leser, "Original tekst i barnets node."

5 Klikk på knappen. Koden kjøres og erstatter span med den nye laget i Javascript-funksjonen. Teksten under avsnittet endres til "Ny tekst i et nytt barn node."

Hint

  • Dette eksemplet viser erstatte en eksisterende barnenode med en ny tekst node. Bruk "replaceChild" node for å erstatte eksisterende noder med andre typer barn noder i tillegg. For eksempel, for å erstatte den opprinnelige barnet noden med en ny node som består av en knapp, erstatte den første linjen i funksjonen med denne: newChild = document.createElement ( "input"). Legg til følgende linje nedenfor som en å sette sitt attributt typen til "knapp": newChild.setAttribute ( "type", "knapp"). Når Javascript-funksjonen kjører, erstatter den teksten "Original tekst i barnets node" med en knapp i stedet for annen tekst.