노드 생성 및 추가

01_노드 생성

var $신규노드=$("신규DOM");

JQuery에서 노드를 생성하는 가장 일반적인 방법은 $()함수를 이용하는 것이다. $() 함수 내부에서는 매개변수로 받은 태그 노드 정보를 파싱해 태그와 1:1대응하는 HTMLElement객체를 생성하는 작업이 일어난다. 이렇게 만들어진자바스크립트 dom객체를 좀더 쉽게 사용할 수 있는 jQuery객체를 만들어 반환해준다.

 

02_신규 노드를 첫 번째 자식 노드로 추가

$부모노드.prepend($추가노드)
$추가노드.prependTo($부모노드)

신규 노드를 특정 노드의 첫 번째 자식 노드로 추가하는 방법은 prepend()와 prependTo() 두 가지 방법이 있다. 이 두 메서드는 사용법에서 알 수 있는 것처럼 부모 노드와 추가 노드 위치가 다를 뿐 기능은 동일하다. 

 

03_신규 노드를 특정 노드의 마지막 번째 자식 노드로 추가

$부모노드.append($신규노드)
$신규노드.appendTo($부모노드)

append()와 appendTo()를 사용하면 신규 노드를 특정 노드의 마지막 번째 자식 노드로 추가할 수 있다. 

 

04_특정 노드의 이전 위치에 추가

$추가노드.insertBefore($기준노드)
$기준노드.before($추가노드)

신규 노드를 특정 노드의 이전 형제 노드로 추가하고 싶은 경우 insertBefor() 와 before()을 사용한다.

 

05_특정 노드 다음에 노드 추가

$추가노드.insertAfter($기준노드)
$기준노드.after($추가노드)

신규 노드를 특정 노드의 다음 형제 노드로 추가하고 싶은 경우 insertAtfer()와 after()메서드를 사용한다.