This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

ChildNode.before 메소드는 ChildNode 의 부모가 가진 자식의 ChildNode 바로 이전에 Node 또는 DOMString 객체의 집합을 삽입합니다.DOMString 객체는 Text 노드와 동일하게 삽입됩니다.

문법

[Throws, Unscopable] 
void ChildNode.before((Node or DOMString)... nodes);

파라미터

nodes
삽입할 Node 또는 DOMString 객체의 집합입니다.

예외

예제

엘리먼트 삽입하기

var parent = document.createElement("div");
var child = document.createElement("p");
parent.appendChild(child);
var span = document.createElement("span");

child.before(span);

console.log(parent.outerHTML);
// "<div><span></span><p></p></div>"

텍스트 삽입하기

var parent = document.createElement("div");
var child = document.createElement("p"); 
parent.appendChild(child);

child.before("Text"); 

console.log(parent.outerHTML);
// "<div>Text<p></p></div>"

엘리먼트와 텍스트 삽입하기

var parent = document.createElement("div");
var child = document.createElement("p"); 
parent.appendChild(child); 
var span = document.createElement("span");

child.before(span, "Text"); 

console.log(parent.outerHTML);
// "<div><span></span>Text<p></p></div>"

ChildNode.before() 는 범위를 지정할 수 없습니다

before() 메소드는 with 구문으로 범위를 지정할 수 없습니다. 자세한 내용은 Symbol.unscopables 문서를 확인하세요.

with(node) { 
  before("foo");
}
// ReferenceError: before is not defined 

폴리필

다음 코드를 사용해 인터넷 익스플로러 9 이상에서 before() 메소드 를 폴리필링할 수 있습니다.

// from: https://github.com/jserz/js_piece/blob/master/DOM/ChildNode/before()/before().md
(function (arr) {
  arr.forEach(function (item) {
    if (item.hasOwnProperty('before')) {
      return;
    }
    Object.defineProperty(item, 'before', {
      configurable: true,
      enumerable: true,
      writable: true,
      value: function before() {
        var argArr = Array.prototype.slice.call(arguments),
          docFrag = document.createDocumentFragment();
        
        argArr.forEach(function (argItem) {
          var isNode = argItem instanceof Node;
          docFrag.appendChild(isNode ? argItem : document.createTextNode(String(argItem)));
        });
        
        this.parentNode.insertBefore(docFrag, this);
      }
    });
  });
})([Element.prototype, CharacterData.prototype, DocumentType.prototype]);

명세

명세 상태 코멘트
DOM
The definition of 'ChildNode.before()' in that specification.
Living Standard 초기 정의.

브라우저 호환성

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support 54Edge Full support 17Firefox Full support 49IE No support NoOpera Full support 39Safari No support NoWebView Android Full support 54Chrome Android Full support 54Edge Mobile No support NoFirefox Android Full support 49Opera Android Full support 39Safari iOS No support NoSamsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.

함께 보기

문서 태그 및 공헌자

이 페이지의 공헌자: cs09g
최종 변경자: cs09g,