Metoden prepend

Metoden prepend låter dig infoga i början av ett element ett annat element. Som parameter tar metoden ett element, vanligtvis skapat via createElement, eller en sträng. Du kan lägga till flera element eller strängar på en gång genom att lista dem med komma emellan.

Syntax

javascriptförälder.prepend(element eller sträng);

Exempel

Låt oss skapa ett stycke, sätta dess text och placera det på sidan i början av blocket #parent:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.prepend(p);

Resultat av utförd kod:

html<div id="parent">
  <p>!</p>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Exempel

Låt oss placera flera stycken direkt i början av blocket #parent:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

javascriptlet parent = document.querySelector('#parent');

let p1 = document.createElement('p');
p1.textContent = 'a';

let p2 = document.createElement('p');
p2.textContent = 'b';

parent.prepend(p1, p2);

Resultat av utförd kod:

html<div id="parent">
  <p>b</p>
  <p>a</p>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Exempel

Låt oss använda en sträng som parameter för metoden:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

javascriptlet parent = document.querySelector('#parent');
parent.prepend('!');

Resultat av utförd kod:

html<div id="parent">
  !
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

Se även