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.

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/ko/web/api/element/index.md)

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 Standard
# ref-for-dom-parentnode-prepend①

브라우저 호환성

BCD tables only load in the browser

같이 보기