HTML DOM Element insertBefore() 메서드

정의와 사용법

insertBefore() 메서드는 기존 자식 노드 앞에 자식 노드를 삽입합니다。

또한 참조하십시오：

appendChild() 메서드

replaceChild() 메서드

removeChild() 메서드

remove() 메서드

childNodes 속성

firstChild 속성

lastChild 속성

firstElementChild 속성

lastElementChild 속성

实例

例子 1

  1. 创建 <li> 元素
  2. 创建文本节点
  3. 将文本附加到 <li> 元素
  4. 在第 <ul> 中的第一个子元素之前插入 <li> 元素：
const newNode = document.createElement("li");
const textNode = document.createTextNode("Water");
newNode.appendChild(textNode);
const list = document.getElementById("myList");
list.insertBefore(newNode, list.children[0]);

직접 테스트해 보세요

예제 2

한 개의 목록에서 마지막 요소를 다른 목록의 시작에 이동시키기:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, list.children[0]);

직접 테스트해 보세요

예제 3

한 개의 목록에서 마지막 요소를 다른 목록의 마지막에 이동시키기:

const node = document.getElementById("myList2").lastElementChild;
const list = document.getElementById("myList1");
list.insertBefore(node, null);

직접 테스트해 보세요

문법

element.insertBefore(newnode, existingnode)

또는

node.insertBefore(newnode, existingnode)

파라미터

파라미터 설명
newnode 必需. 삽입할 노드(요소).
existingnode

선택 사항. 새로운 노드를 삽입하기 전에 새로운 노드의 자식 노드를 삽입합니다.

지정되지 않았을 경우, insertBefore 메서드는 newnode를 마지막에 삽입합니다.

반환 값

형식 설명
노드 삽입된 노드.

브라우저 지원

element.insertBefore() DOM Level 1 (1998) 기능입니다.

모든 브라우저가 완전히 지원합니다:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
지원 9-11 지원 지원 지원 지원