Metoden prepend

Metoden prepend lägger till text i början av ett element. Det finns också en metod prependTo, som fungerar på ett liknande sätt.

Syntax

Infoga text i början av ett element:

javascript$(selector).prepend(text);

I början av de valda elementen kan text läggas till, som returneras av en anpassad funktion. Funktionen anropas för var och en av de valda elementen. Vid anropet skickas följande parametrar: elementets position i uppsättningen, elementets nuvarande innehåll:

javascript$(selector).prepend(function(index, currentContent));

Innehållet kan inte bara vara vanlig text, utan även DOM-element eller jQuery-objekt. I så fall kommer dessa element att flyttas från sin position i HTML-koden.

Exempel

Låt oss infoga text i början av ett givet stycke:

html<p id="test">text</p>
javascript$('#test').prepend('!!!');

HTML-koden kommer att se ut så här:

html<p id="test">!!!text</p>

Exempel

Låt oss infoga text med taggar i början av ett givet stycke:

html<p id="test">text</p>
javascript$('#test').prepend('<b>!!!</b>');

HTML-koden kommer att se ut så här:

html<p id="test"><b>!!!</b>text</p>

Exempel

Låt oss hitta alla stycken och sätta dess ordningsnummer i uppsättningen i början av varje stycke:

html<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
javascript$('p').prepend(function(index, text) {
  return index;
});

HTML-koden kommer att se ut så här:

html<p>0text</p>
<p>1text</p>
<p>2text</p>
<p>3text</p>
<p>4text</p>

Se även

  • metoden prependTo,
    som lägger till text i början av ett element
  • metoderna append, before, after,
    som låter dig lägga till innehåll på en specifik plats
  • pseudoelementet before,
    som lägger till text i slutet av ett element med CSS