HTML DOM insertBefore() 메서드
예시
<ul> 요소의 첫 번째 자식 요소 앞에 새 <li> 요소를 삽입합니다.
var newItem = document.createElement("LI"); // Create a <li> node
var textnode = document.createTextNode("Water"); // Create a text node
newItem.appendChild(textnode); // Append the text to <li>
var list = document.getElementById("myList"); // Get the <ul> element to insert a new node
list.insertBefore(newItem, list.childNodes[0]); // Insert <li> before the first child of <ul>
아래에서 더 많은 "직접 사용해 보기" 예를 살펴보세요.
정의 및 사용
insertBefore() 메서드는 지정한 기존 자식 바로 앞에 노드를 자식으로 삽입합니다.
팁: 텍스트를 사용하여 새 목록 항목을 만들려면 <li> 요소에 추가하는 텍스트 노드로 텍스트를 만든 다음 목록에 <li>를 삽입해야 합니다.
또한 insertBefore 메소드를 사용하여 기존 요소를 삽입/이동할 수 있습니다("추가 예제" 참조).
브라우저 지원
표의 숫자는 이 방법을 완전히 지원하는 첫 번째 브라우저 버전을 지정합니다.
| Method | |||||
|---|---|---|---|---|---|
| insertBefore() | Yes | Yes | Yes | Yes | Yes |
통사론
node.insertBefore(newnode, existingnode)
매개변수 값
| Parameter | Type | Description |
|---|---|---|
| newnode | Node object | Required. The node object you want to insert |
| existingnode | Node object | Required. The child node you want to insert the new node before. If set to
null, the insertBefore method will insert the newnode at the end |
기술적 세부 사항
| 반환 값: | 삽입된 노드를 나타내는 노드 개체 |
|---|---|
| DOM 버전 | 코어 레벨 1 노드 개체 |
더 많은 예
예시
한 목록에서 다른 목록으로 <li> 요소를 이동합니다.
var node = document.getElementById("myList2").lastChild;
var list = document.getElementById("myList1");
list.insertBefore(node, list.childNodes[0]);