prependメソッド

メソッド prepend は、ある要素の先頭に別の要素を挿入することを可能にします。このメソッドのパラメータは、通常createElementを通して作成された要素、または文字列を受け取ります。カンマで区切って列挙することで、複数の要素や文字列を一度に追加することができます。

構文

javascript親要素.prepend(要素または文字列);

例

段落を作成し、テキストを設定して、ページ上の #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);

コード実行結果：

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

例

複数の段落を #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);

コード実行結果：

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

例

メソッドのパラメータとして文字列を使ってみましょう：

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

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

コード実行結果：

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

関連項目