jQuery lägga till element

Med jQuery kan nya element/innehåll läggas till enkelt.

Lägg till nytt HTML-innehåll

Vi kommer att lära oss fyra jQuery-metoder för att lägga till nytt innehåll:

  • append() - Lägg innehåll i slutet av det valda elementet
  • prepend() - Lägg innehåll i början av det valda elementet
  • after() - Lägg innehåll efter det valda elementet
  • before() - Lägg innehåll innan det valda elementet

jQuery append() metoden

jQuery append() metoden lägger innehåll i slutet av det valda elementet.

Exempel

$("p").append("Some appended text.");

Prova själv

jQuery prepend() metoden

jQuery prepend() metoden lägger innehåll i början av det valda elementet.

Exempel

$("p").prepend("Some prepended text.");

Prova själv

Lägg till flera nya element med append() och prepend() metoder

I ovanstående exempel lägger vi till text/HTML endast i början eller slutet av den valda elementet.

Men append() och prepend() metoder kan ta emot obegränsat antal nya element. Text/HTML kan genereras med jQuery (som i ovanstående exempel), eller med JavaScript-kod och DOM-element.

I följande exempel skapar vi flera nya element. Dessa element kan skapas genom text/HTML, jQuery eller JavaScript/DOM. Därefter lägger vi till dessa nya element till texten via append() metoden (gäller också för prepend()):

Exempel

function appendText()
{
var txt1="<p>Text.</p>";               // Med HTML skapar vi ett nytt element
var txt2=$("<p></p>").text("Text.");   // Med jQuery skapar vi ett nytt element
var txt3=document.createElement("p");  // Skapa nya element via DOM
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3);         // Lägg till nya element till p
{}

Prova själv

jQuery after() och before() metoder

jQuery after() metod lägger till innehåll efter valda element.

jQuery before() metod lägger till innehåll före valda element.

Exempel

$("img").after("Någon text efter");
$("img").before("Någon text innan");

Prova själv

Lägg till flera nya element via after() och before() metoder

after() och before() metoder kan ta emot ett obegränsat antal nya element som kan skapas via text/HTML, jQuery eller JavaScript/DOM.

I följande exempel skapar vi flera nya element. Dessa element kan skapas via text/HTML, jQuery eller JavaScript/DOM. Därefter lägger vi till dessa nya element i texten via after() -metoden (gäller också för before() metoden):

Exempel

function afterText()
{
var txt1="<b>I </b>";                    // Skapa nya element via HTML
var txt2=$("<i></i>").text("älska ");     // Skapa nya element via jQuery
var txt3=document.createElement("big");  // Skapa nya element via DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // Lägg till nya element efter img
{}

Prova själv

jQuery HTML-referenshandbok

För en fullständig förteckning över jQuery HTML-metoder, besök följande referenshandbok: