jQuery 노드를 생성/추가/삭제/이동 하기

jQuery 노드를 생성/추가/이동/삭제 하기

설명을 위한 예제로 ul과 li태그를 사용하여 HTML 코드를 작성하였습니다.

실제 개발할 때는 ul, li태그뿐만아니라 다른 부분에서도 노드를 추가 생성할 수 있겠지만 간단한 설명을 위해 ul, li로 정리하겠습니다.

<ul>
    <li id="menu1">menu1</li>
    <li id="menu2">menu2</li>
    <li id="menu3">menu3</li>
    <li id="menu4">menu4</li>
    <li id="menu5">menu5</li>
</ul>

아래는 오늘 포스팅한 메서드의 간략 설명입니다.

분류	내용	jQuery DOM 핵심 프로퍼티 및 메서드
노드 생성 / 추가	노드 생성	$("DOM 문자열");
	첫 번째 자식 노드로 추가	$부모노드.prepend($추가노드)  $추가노드.prependTo($부모노드)
	마지막 번째 자식 노드로 추가	$부모노드.append($신규노드)  $신규노드.appendTo($부모노드)
	특정 노드의 이전 위치로 추가	$(기준노드).before($추가노드)  $(추가노드).insertBefore($기준노드)
	특정 노드의 다음 위치에 추가	$기준노드.after($추가노드)  $추가노드.insertAfter($기준노드)
노드 이동	첫 번째 자식 노드로 이동	$부모노드.prepend($이동노드)  $추가노드.prependTo($이동노드)
	마지막 번째 자식 노드로 이동	$부모노드.append($이동노드)  $이동노드.appendTo($부모노드)
	특정 노드의 이전으로 이동	$(이동노드).before($기준노드)  $(기준노드).insertBefore($이동노드)
	특정 노드의 다음 노드로 이동	$이동노드.after($기준노드)  $기준노드.insertAfter($이동노드)
노드 삭제	특정 노드 삭제	$대상.remove()
	모든 자식 노드 제거	$대상.children().remove()

---

노드 생성하기

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

$()함수 내부에서 매개변수로 받은 태그 노드 정보를 파싱하여 태그와 대응하는 HTMLLiElement 객체를 생성하는 작업이 일어납니다. 생성된 객체를 쉽게 사용할 수 있게 jQuery 객체로 만들어 반환해 줍니다.

$("#btnAdd").click(function() {
    count = 1;
    
    $li = $("<li>new menu" + count + "</li>");
    console.log($li.get(0));    
});

jQuery 객체가 없다면 순수 자바스크립트로 이렇게 노드를 생성해줍니다.

$("#javascriptbtnAdd").click(function() {
    count++;
    
    //신규 노드를 생성
    var li = document.createElement("li");
    
    //신규 노드의 텍스트 생성
    var liText = document.createTextNode("new menu" + count);
    li.appendChild(liText);
    
    console.log(liText);
});

---

노드 추가하기

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

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

//prepend()
$li = $("<li>new menu</li>");
$("ul").prepend($li);
 
//prependTo
$li = $("<li>new menu</li>");
$li.prependTo("ul");

신규 노드를 마지막 번째 자식 노드로 추가

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

//append
$("ul").append("<li>new menu</li>");
 
//appendTo
$("<li>new menu</li>").appendTo("ul");
 
//선택자를 이용용하여 jQuery객체로 사용할 수 있다.
$li = $("<li>new menu</li>");
$("ul").append($li);
$($li).appendTo("ul");

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

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

$li = $("<li>new menu</li>");
 
//before
$("#menu3").before($li);
 
//insertBefore
$li.insertBefore("#menu3");

특정 노드 다음에 노드 추가

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

$li = $("<li>new menu</li>");
 
//after
$("#menu3").after($li);
 
//insertAfter
$li.insertAfter("#menu3");

---

노드 이동하기

첫 번째 노드로 이동

$부모노드.prepend($이동노드)
$이동노드.prependTo($부모노드)

//prepend
var $menu3 = $("#menu3"); 
$("ul").prepend($menu3);
 
//prependTo
$("#menu3").prependTo("ul");

마지막 번째 노드로 이동

$부모노드.append($이동노드)
$이동노드.appendTo($부모노드)

//append
var $menu3 = $("#menu3"); 
$("ul").append($menu3);
 
//appendTo
$("#menu3").appendTo("ul");

특정 노드의 이전 노드로 이동

$(이동노드).insertBefore($기준노드)
$(기준노드).before($노드)

var $menu3 = $("#menu3");
var $menu5 = $("#menu5");
//before
$("#menu5").before($menu3);
 
//insertBefore
$("#menu3").insertBefore($menu5);

특정 노드의 다음 노드로 이동

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

var $menu3 = $("#menu3");
var $menu5 = $("#menu5");
//after
$("#menu5").after($menu3);
 
//insertAfter
$("#menu3").insertAfter($menu5);

---

노드 삭제하기

$(대상).remove();

var $menu3 = $("#menu3");
$menu3.remove();
 
$("#menu5").remove();

자식 노드를 삭제하는 방법은 children()을 사용하면 됩니다.

$("ul").children().remove();