GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

No menu could be recovered. Follow the blue links in the page.

This view

  • Original page
  • New address

GeezerVison is showing da.javascript.info — OPret et træ fra objektet

  • Tutorial
  • Browser: Dokumenter, Hændelser, brugergrænseflader
  • Dokumentet
  • Modificering af dokumentet
tilbage til lektionen

OPret et træ fra objektet

vigtighed: 5

Skriv en funktion createTree, som opretter en indlejret ul/li-liste fra det indlejrede objekt.

For eksempel:

let data = {
  "Fisk": {
    "ørred": {},
    "laks": {}
  },

  "Træ": {
    "Store": {
      "Mammuttræ": {},
      "Eg": {}
    },
    "Blomstrende": {
      "æbletræ": {},
      "magnolia": {}
    }
  }
};

Syntaksen for at kalde funktionen er:

let container = document.getElementById('container');
createTree(container, data); // opretter træet i container

Resultatet (træet) bør se sådan ud:

Vælg en af følgende to måder at løse denne opgave:

  1. Opret HTML’en for træet og tildel den til container.innerHTML.
  2. Opret de enkelte træ-noder og tilføj dem med DOM-metoder.

Det ville være dejligt, hvis du kunne gøre begge dele.

P.S. Træet bør ikke have “ekstra” elementer som tomme <ul></ul> for bladene.

Åbn en sandbox til opgaven.

Den nemmeste måde at gennemgå objektet er at bruge rekursion.

  1. Løsningen med innerHTML.
  2. Løsningen med DOM.
You are visitor 01402503 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.