Tilføj LI-elementer til UL med jQuery

14/06/2025

★★★★★Rating: 4.15 (8466 votes)

Dynamisk Manipulation af HTML-lister med jQuery

HTML-lister er en grundlæggende byggesten for webstrukturering. Uordnede lister (

) bruges flittigt til at organisere information på en overskuelig måde. Mens lister ofte oprettes statisk under udviklingen, opstår der hyppigt behov for at tilføje eller fjerne elementer dynamisk, især når data hentes fra databaser eller eksterne kilder. jQuery, et populært JavaScript-bibliotek, tilbyder kraftfulde og intuitive metoder til netop dette. Denne artikel guider dig igennem, hvordan du nemt kan tilføje
-elementer

til en eksisterende

-struktur ved hjælp af jQuery.

Den Essentielle jQuery append() Metode

Kernen i at tilføje nye elementer til en eksisterende HTML-struktur med jQuery ligger i append() metoden. Denne metode tillader dig at indsætte indhold i slutningen af det valgte element. For at tilføje et

-element til en

append()

-element som en streng.

Eksempel: Tilføjelse af et simpelt listeelement

Lad os se på et konkret eksempel. Antag, at du har en simpel uordnet liste og en knap. Når knappen klikkes, skal et nyt listeelement tilføjes til listen.

How to add Li srcset= — elements in a ul> element in jQuery?" width="685" height="487"/> To add elements to an existing using jQuery, you can simply use the append() method. The following example demonstrates adding a element at the end of a on click of a button.

<!DOCTYPE html> <html lang="da"> <head> <meta charset="UTF-8"> <title>jQuery Tilføj LI til UL</title> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#menu").append('<li><a href="#">Nyt listeelement</a></li>'); }); }); </script> </head> <body> <ul id="menu"> <li><a href="#">Hjem</a></li> <li><a href="#">Om os</a></li> <li><a href="#">Tjenester</a></li> </ul> <button type="button">Tilføj Nyt LI Element</button> </body> </html>

I dette kodeeksempel:

Vi inkluderer jQuery-biblioteket via et CDN.
$(document).ready() sikrer, at koden først køres, når DOM (Document Object Model) er fuldt indlæst.
Vi knytter en click event handler til alle button-elementer.
Når knappen klikkes, vælger vi
med id'et menu ved hjælp af $("#menu").
.append('
<a href="#">Nyt listeelement</a></li>')

indsætter det specificerede HTML-fragment (et nyt

med et -tag) i slutningen af .

Avancerede Anvendelser: Dynamisk Generering fra Data

Ofte vil du generere listeelementer baseret på data, der hentes fra en ekstern kilde, f.eks. en API, en database eller en XML-fil. jQuery gør det nemt at iterere over data og oprette HTML-elementer dynamisk.

How do I print a LI text value in jQuery? — Use a loop: values.push($(v).text()); if you are using jQuery then use .each () jQuery('#sortable2 li').each(function(){ console.log($(this).text()); //prints each li text value in console });

Lad os forestille os, at vi har en XML-fil med bogtitler, som vi ønsker at vise i en liste. Dette er et klassisk scenarie, hvor dynamisk listegenerering kommer til sin ret, især til oprettelse af navigationsmenuer eller produktlister.

Eksempel: Dynamisk Generering fra XML med AJAX

Først skal vi have en XML-fil. Lad os kalde den the-store.xml:

<?xml version="1.0"?> <catalog> <book> <title>Computer Architecture</title> </book> <book> <title>Advanced Composite Materials</title> </book> <book> <title>Asp.Net 4 Blue Book</title> </book> <!-- Flere bogelementer... --> </catalog>

Nu kan vi bruge jQuerys $.ajax() til at hente denne fil og derefter oprette listeelementer:

 som beholder var menuUl = $("#menu"); // Henter data via AJAX $.ajax({ type: 'GET', url: 'the-store.xml', // Eller URL til din API dataType: 'xml', success: function (xml) { // Itererer over hvert 'book' element i XML'en $(xml).find('book').each(function () { var bookTitle = $(this).find('title').text(); // Opretter et nyt  element med et tag var newLi = $("<li></li>"); var newLink = $("<a href='#'></a>").text(bookTitle); newLink.appendTo(newLi); newLi.appendTo(menuUl); // Tilføjer det nye til }); }, error: function() { alert("Kunne ikke indlæse XML-data."); } }); });

I dette script:

Bruger vi $.ajax() til at sende en GET-anmodning til the-store.xml.
dataType: 'xml' specificerer, at vi forventer XML-svar.
I success-funktionen, som kaldes ved succesfuld hentning, finder vi alle <book>-elementer ved hjælp af $(xml).find('book').
Vi itererer over hvert bogelement med .each().
For hver bog henter vi titlen med $(this).find('title').text().
Vi opretter dynamisk et nyt <li>-element og et <a>-element inden i det.
Til sidst bruges .appendTo(menuUl) til at tilføje det nyoprettede <li> til vores <ul id="menu">.

Andre nyttige jQuery metoder til listemanipulation

Udover append() findes der andre metoder, der kan være nyttige:

prepend(): Indsætter indhold i starten af det valgte element.
after(): Indsætter indhold efter det valgte element.
before(): Indsætter indhold før det valgte element.
html(): Bruges til at hente eller erstatte hele HTML-indholdet af et element. Kan bruges til at tilføje flere
'er på én gang.
clone(): Bruges til at duplikere eksisterende elementer, som derefter kan tilføjes et nyt sted.

Tabel: Sammenligning af metoder til tilføjelse

Metode	Beskrivelse	Anvendelse ved tilføjelse til
`append()`	Tilføjer indhold i slutningen af elementet.	`$("#myList").append("<li>Nyt element</li>");`
`prepend()`	Tilføjer indhold i starten af elementet.	`$("#myList").prepend("<li>Første element</li>");`
`after()`	Indsætter indhold lige efter det valgte element.	`$("#myList li:last").after("<li>Efter sidste</li>");`
`before()`	Indsætter indhold lige før det valgte element.	`$("#myList li:first").before("<li>Før første</li>");`
`html()`	Erstatte eller sætte alt indhold. Kan bruges til at tilføje flere på én gang ved at hente eksisterende og tilføje.	`$("#myList").html($("#myList").html() + "<li>Mere indhold</li>");`

Point of Interest: Dynamiske Nedtræksmenuer

En særlig anvendelig applikation af dynamisk generering af

er oprettelsen af responsive nedtræksmenuer. Ved at hente data fra en kilde som XML eller JSON kan man opbygge komplekse menustrukturer, hvor undermenuer genereres baseret på relationerne i dataene. Ved at kombinere jQuery med CSS kan man skabe interaktive og visuelt tiltalende menuer, der forbedrer brugeroplevelsen markant. Eksemplet med bogtitler fra XML kan nemt udvides til at skabe en navigationsmenu, hvor bogtitlerne fungerer som menupunkter, og potentielt yderligere data kan bruges til at generere underliggende menuer.

Ofte Stillede Spørgsmål (FAQ)

Hvordan tilføjer jeg flere
-elementer på én gang?

Du kan gøre dette ved at konstruere en streng, der indeholder flere

-elementer, eller ved at oprette flere elementer og derefter tilføje dem samlet:

var newItems = "<li>Element 1</li><li>Element 2</li>"; $("#myList").append(newItems);

Kan jeg tilføje et
-element baseret på input fra en formular?

Ja, det kan du. Du ville typisk hente værdien fra et inputfelt og derefter bruge den til at konstruere dit

-element, før du tilføjer det til listen.

Hvad er forskellen på `append()` og `appendTo()`?

append() er en jQuery-metode, der kaldes på det element, du vil tilføje indhold til. appendTo() er en metode, der kaldes på det element, du vil indsætte, og den tager det element, du vil indsætte i, som argument. Funktionaliteten er den samme, men syntaksen er forskellig:

// append() $("#container").append("<p>Indhold</p>"); // appendTo() $("<p>Indhold</p>").appendTo("#container");

Konklusion

At tilføje

-elementer

til en