Element: prepend() 메서드

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Element.prepend() 메서드는 Element의 첫 번째 자식 이전에 Node 객체 혹은 문자열 객체 집합을 삽입합니다. 문자열 객체는 Text 노드와 동등하게 삽입됩니다.

구문

js
prepend(param1)
prepend(param1, param2)
prepend(param1, param2, /* … ,*/ paramN)

매개변수

param1, …, paramN

삽입할 Node 혹은 문자열 객체 집합.

반환 값

없음 (undefined).

예외

HierarchyRequestError DOMException

노드가 계층에서 지정된 위치에 삽입될 수 없을 때 에러를 던집니다.

예제

요소를 앞에 추가하기

js
let div = document.createElement("div");
let p = document.createElement("p");
let span = document.createElement("span");
div.append(p);
div.prepend(span);

console.log(div.childNodes); // NodeList [ <span>, <p> ]

텍스트를 앞에 추가하기

js
let div = document.createElement("div");
div.append("Some text");
div.prepend("Headline: ");

console.log(div.textContent); // "Headline: Some text"

요소와 텍스트를 앞에 추가하기

js
let div = document.createElement("div");
let p = document.createElement("p");
div.prepend("Some text", p);

console.log(div.childNodes); // NodeList [ #text "Some text", <p> ]

prepend 메서드는 범위가 지정되지 않습니다

prepend() 메서드는 with 문으로 범위가 지정되지 않습니다. 자세한 내용은 Symbol.unscopables 참고하시기 바랍니다.

js
let div = document.createElement("div");

with (div) {
  prepend("foo");
}
// ReferenceError: prepend is not defined

명세서

Specification
DOM
# ref-for-dom-parentnode-prepend①

브라우저 호환성

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
prepend

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

같이 보기