JavaScript History 객체 HTML DOM Element 객체

HTML DOM insertBefore() 메서드

insertBefore()이 메서드는 지정된 기존 서브 노드 앞에 서브 노드를 삽입하는 데 사용됩니다.

만약 주어진 서브 오브젝트가 문서 중 현재 노드에 대한 참조라면 insertBefore()를 통해 현재 위치에서 새 위치로 이동시킵니다. (다음의 '추가 예제'를 참조하세요).

사용appendchild()메서드는 지정된 부모 노드의 자식 노드 목록의 마지막에 노드를 추가합니다.

문법:

node.insertBefore(newNode, existingNode)

예제

var newElem = document.createElement("h3");　　//　새로운 h를 생성합니다3요소
var newContent = document.createTextNode("Hi there");　　//　텍스트 내용을 생성합니다
newElem.appendChild(newContent);　　//　텍스트 노드를 새로 생성된 h에 추가합니다3
var body = document.body;　　//　BODY를 가져옵니다
body.insertBefore(newElem, body.childNodes[0]);　//　BODY의 첫 번째 자식 요소 앞에 H를 삽입하세요3

테스트를 보세요‹/›

주의:텍스트를 포함한 새로운 요소를 생성하려면, 텍스트를 Text 노드로 생성한 다음, 이를 요소에 추가하고, 그 요소를 문서에 추가하는 것을 기억하세요.

브라우저 호환성

모든 브라우저가 insertBefore() 메서드를 완벽히 지원합니다:

메서드
insertBefore()	는	는	는	는	는

매개변수 값

매개변수	설명
newNode	삽입하려는 노드 객체
existingNode	신규 노드를 삽입하기 전에 위치하려는 자식 노드를 가져오세요. existingNode가 null로 설정되면 insertBefore 메서드는 newnode를 마지막에 삽입합니다

기술 세부 사항

반환 값:	추가된 노드를 나타내는 Node 객체
DOM 버전:	DOM 등급1

更多实例

<p> 요소를 생성하고 <div> 요소에 삽입합니다:

예제

var para = document.createElement("p");　　　//　<p> 노드를 생성합니다
var txt = document.createTextNode("이것은 문단입니다.");//　텍스트 노드를 생성합니다
para.appendChild(txt);//　text를 <p>에 추가하세요
var div = document.getElementById("demo");//　id="demo"를 가진 DIV를 가져옵니다
div.insertBefore(para, div.childNodes[0]);//　DIV의 첫 번째 자식 요소 앞에 P 노드를 삽입하세요

테스트를 보세요‹/›

이 예제는 요소를 현재 위치에서 새 위치로 이동시킵니다:

예제

var elem = document.getElementById("myList2").lastElementChild;
var list1　= document.getElementById("myList1");
list1.insertBefore(elem, list1.childNodes[0]);

테스트를 보세요‹/›

JavaScript 객체

JavaScript 참조 가이드

JS DOM 참조 가이드

HTML DOM insertBefore() 메서드

문법:

브라우저 호환성

매개변수 값

기술 세부 사항

更多实例

관련 참조