jQuery tilføjelse af elementer

Med jQuery kan det nemt tilføje nye elementer/indhold.

Tilføj nyt HTML indhold

Vi vil lære fire jQuery metoder til at tilføje nyt indhold:

  • append() - Indsæt indhold i slutningen af det valgte element
  • prepend() - Indsæt indhold i begyndelsen af det valgte element
  • after() - Indsæt indhold efter det valgte element
  • before() - Indsæt indhold før det valgte element

jQuery append() metoden

jQuery append() metoden indsætter indhold i slutningen af det valgte element.

Eksempel

$("p").append("Vis noget tilføjet tekst.");

Prøv det selv

jQuery prepend() metoden

jQuery prepend() metoden indsætter indhold i begyndelsen af det valgte element.

Eksempel

$("p").prepend("Vis noget indsat tekst.");

Prøv det selv

Tilføj flere nye elementer med append() og prepend() metoderne

I de ovenstående eksempler indsætter vi kun tekst/HTML i begyndelsen eller slutningen af de valgte elementer.

append() og prepend() metoderne kan modtage en uendelig mængde nye elementer som parametre. Tekst/HTML kan genereres ved hjælp af jQuery (som i de ovenstående eksempler), eller ved hjælp af JavaScript kode og DOM elementer.

I de følgende eksempler opretter vi flere nye elementer. Disse elementer kan oprettes ved hjælp af text/HTML, jQuery eller JavaScript/DOM. Derefter tilføjer vi disse nye elementer til teksten ved hjælp af append() metoden (prepend() gælder også):

Eksempel

function appendText()
{
var txt1="<p>Tekst.</p>";               // Ved hjælp af HTML opretter vi et nyt element
var txt2=$("<p></p>").text("Tekst.");   // Ved hjælp af jQuery opretter vi et nyt element
var txt3=document.createElement("p");  // Opret nyt element via DOM
txt3.innerHTML="Tekst.";
$("p").append(txt1,txt2,txt3);         // Tilføj nye elementer
{}

Prøv det selv

jQuery after() og before() metoder

jQuery after() metoden indsætter indhold efter det valgte element.

jQuery before() metoden indsætter indhold før det valgte element.

Eksempel

$("img").after("Visse tekst efter");
$("img").before("Visse tekst før");

Prøv det selv

Tilføj flere nye elementer via after() og before() metoder

after() og before() metoder kan modtage ubegrænsede antal parametre. Nye elementer kan oprettes ved hjælp af text/HTML, jQuery eller JavaScript/DOM.

I det følgende eksempel opretter vi flere nye elementer. Disse elementer kan oprettes ved hjælp af text/HTML, jQuery eller JavaScript/DOM. Derefter indsætter vi disse nye elementer i teksten ved hjælp af after() metoden (gælder også for before()):

Eksempel

function afterText()
{
var txt1="<b>I </b>";                    // Opret nyt element med HTML
var txt2=$("<i></i>").text("elsk ");     // Opret nyt element via jQuery
var txt3=document.createElement("big");  // Opret nyt element via DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // Indsæt nye elementer efter img
{}

Prøv det selv

jQuery HTML referencehåndbog

For fuld information om jQuery HTML-metoder, besøg venligst følgende referencehåndbog: