jQuery 노드다루기 - 2편

 

오늘 내용은 노드를 동적으로 만들어 추가할 수 있는 노드 생성 및 추가 입니다.

오늘 공부에 사용할 예제 입니다

요번 노드 생성 및 추가에서는 5개로 구분 하겠습니다.

 

1. 노드 생성
2. 첫 번째 자식 노드로 추가
3. 마지막 번째 자식 노드로 추가
4. 특정 노드의 이전 위치에 추가
5. 특정 노드의 이후 위치에 추가

 

핵심 첫번째 노드생성에 대해 먼저 알아보겠습니다.

가장 일반 적인 방법은 $()함수를 사용하는 것입니다.

 

사용법 : var $신규노드 = $("신규DOM");

 

예제를 통해 알아 보겠습니다.

 

 

 

다음과 같은 jQuery문을 통해 버튼을 클릭시 console.log에 <li>new menu</li> 가 추가 되었다는것을 알 수 있습니다.

핵심 두번째 신규 노드를 첫 번째 자식 노드로 추가에 대해 알아보겠습니다

 

사용법 :	$부모노드.prepend($추가노드)
	$추가노드.prependTo($부모노드)

신규 노드를 특정 노드의 첫 번째 자식 노드로 추가하는 방법은 이2가지외에도여러가지가 있으나 2가지 방법으로 알아 보겠습니다.

 

첫번째 사용법인 $부모노드.prepend($추가노드)를 먼저 사용한 예제를 보겠습니다.

 

 

 

다음과 같이 기존 예제에 오른쪽 사진과 같은 script를 사용하게되면 [추가] 버튼을 누를때마다 웹페이지에 new menu가 추가되는 것을 확인할 수 있습니다.

 

 두번째 사용법인 $추가노드.prependTo($부모노드)를 사용한 예제를 보겠습니다.

 

prependTo()메서드와 prepend()메서드는 $추가노드와 $부모노드의 위치가 바뀌었을 뿐 동일한 기능을 하기때문에 편한 방법대로 사용하시면 됩니다.

 

핵심 세번째 신규 노드를 특정 노드의 마지막 번째 자식 노드로 추가하기에 대해 알아보겠습니다.

 

신규 노드를 특정 노드의 마지막 번째 자식 노드로 추가하려면 append()와 appendTo() 메서드를 이용 하면 됩니다.

사용법 : $부모노드.append($추가노드)

               $추가노드.appendTo($부모노드)

예제를 통해 알아보겠습니다.

- 추가 버튼을 클릭하면 다음 실행 화면처럼 신규 노드를 만들어 ul.menu의 첫 번째 자식 노드로 추가하기.

 

 

 

위의 그림은 append()메서드를 사용해서 [추가] 버튼을 클릭했을 시 마지막 노드로 추가하는 방법입니다.

appendTo()메서드는 위에 나온 prependTo처럼 $부모노드와 $신규노드의 위치만 바뀌었을 뿐 사용법은 똑같기 때문에 편한 메서드를 골라서 사용하시면 됩니다.

 

핵심 네번째 특정 노드의 이전 위치에 추가에 대해 알아보겠습니다.

 

신규 노드를 특정 노드의 이전 형제 노드로 추가하고 싶은 경우 insertBefore()메서드와 before()메서드를 사용하면 됩니다 사용법을 알아보겠습니다.

사용법 :	$추가노드.insertBefore($기준노드)
	$기준노드.before($추가노드)

 

예제를 통해 쉽게 확인해보도록 하겠습니다.

 - 추가 버튼을 클릭하면 신규 노드를 만들어 select 클래스가 적용된 메뉴 아이템의 이전위치에 노드를 추가하시오.

 

 

$()함수를 이용해 신규 노드를 추가할 위치("ul.menu li.select")를 찾은 후 추가하고자 하는 태그 정보("<li>new menu" + count + "</li>")를 문자열로 만들어 before() 메서드를 호출하면 됩니다.

 

insertBefore()메서드의 경우 prependTo()메서드와, appendTo()메서드 처럼 기존노드와 추가 노드 위치만 바뀌었을뿐 기능은 동일합니다.

 

마지막 다섯번째 특정 노드 다음에 노드 추가하기에 대해 알아보겠습니다.

 

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

 

사용법 :	$추가노드.insertAfter($기준노드)
	$기준노드.after($추가노드)

예제를 통해 쉽게 확인해보도록 하겠습니다.

 - 추가 버튼을 클릭하면 신규 노드를 만들어 select 클래스가 적용된 메뉴 아이템의 다음 위치에 추가해 주세요.

 

 

저는 2번째 방법으로 코딩을 했습니다 $기준노드 = $("ul.menu li.select") 잡고 after()메서드를 통해 $추가노드 = "<li>new menu" + count + "</li>"를 통해 select클래스가 적용된 메뉴3아이템의 뒤에 노드가 추가됩니다.

오늘 배운 노드 다루기 2편 정리

노드 생성 / 추가	노드생성	$("추가노드DOM 문자열")
	첫번째 자식 노드 추가	$부모노드.prepend($추가노드)
		$추가노드.prependTo($부모노드)
	마지막 번째 자식 노드로 추가	$부모노드.append($추가노드)
		$추가노드.appendTo($부모노드)
	특정 노드의 이전 위치에 추가	$추가노드.insertAfter($기준노드)
		$기준노드.after($추가노드)
	특정 노드의 다음 위치에 추가	$추가노드.insertBefore($기준노드)
		$기준노드.before($추가노드)

 

위에 표의 내용은 오늘 하루 배운 것들을 보기 쉽게 정리한 것 입니다..

표의 2,3번은 특정 노드의 자식 노드로 추가하는 것이고 표의 4,5번은 특정 노드의 형제 노드로 추가하는 것이기 때문에 주의해서 사용하시면 됩니다.