반응형
출처: https://ktko.tistory.com/entry/jQuery-노드를-생성추가삭제이동-하기 [KTKO 개발 블로그와 여행 일기]
설명을 위한 예제로 ul과 li태그를 사용하여 HTML 코드를 작성하였습니다.
실제 개발할 때는 ul, li태그뿐만아니라 다른 부분에서도 노드를 추가 생성할 수 있겠지만 간단한 설명을 위해 ul, li로 정리하겠습니다.
|
1
2
3
4
5
6
7
|
<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() |
노드 생성하기
|
1
|
var $신규 노드 = $("신규DOM");
|
$()함수 내부에서 매개변수로 받은 태그 노드 정보를 파싱하여 태그와 대응하는 HTMLLiElement 객체를 생성하는 작업이 일어납니다. 생성된 객체를 쉽게 사용할 수 있게 jQuery 객체로 만들어 반환해 줍니다.
|
1
2
3
4
5
6
|
$("#btnAdd").click(function() {
count = 1;
$li = $("<li>new menu" + count + "</li>");
console.log($li.get(0));
});
|
jQuery 객체가 없다면 순수 자바스크립트로 이렇게 노드를 생성해줍니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
$("#javascriptbtnAdd").click(function() {
count++;
//신규 노드를 생성
var li = document.createElement("li");
//신규 노드의 텍스트 생성
var liText = document.createTextNode("new menu" + count);
li.appendChild(liText);
console.log(liText);
});
0
|
노드 추가하기
신규 노드를 첫 번째 자식 노드로 추가
|
1
2
|
$부모노드.prepend($추가노드)
$추가노드.prependTo($부모노드)
|
|
1
2
3
4
5
6
7
|
//prepend()
$li = $("<li>new menu</li>");
$("ul").prepend($li);
//prependTo
$li = $("<li>new menu</li>");
$li.prependTo("ul");
|
신규 노드를 마지막 번째 자식 노드로 추가
|
1
2
|
$부모노드.append($신규노드)
$신규노드.appendTo($부모노드)
|
|
1
2
3
4
5
6
7
8
9
10
|
//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");
|
특정 노드의 이전 위치에 추가
|
1
2
|
$(기준노드).before($추가노드)
$(추가노드).insertBefore($기준노드)
|
|
1
2
3
4
5
6
7
|
$li = $("<li>new menu</li>");
//before
$("#menu3").before($li);
//insertBefore
$li.insertBefore("#menu3");
|
cs |
특정 노드 다음에 노드 추가
|
1
2
|
$기준노드.after($추가노드)
$추가노드.insertAfter($기준노드)
|
|
1
2
3
4
5
6
7
|
$li = $("<li>new menu</li>");
//after
$("#menu3").after($li);
//insertAfter
$li.insertAfter("#menu3");
|
노드 이동하기
첫 번째 노드로 이동
|
1
2
|
$부모노드.prepend($이동노드)
$이동노드.prependTo($부모노드)
|
|
1
2
3
4
5
6
|
//prepend
var $menu3 = $("#menu3");
$("ul").prepend($menu3);
//prependTo
$("#menu3").prependTo("ul");
|
cs |
마지막 번째 노드로 이동
|
1
2
|
$부모노드.append($이동노드)
$이동노드.appendTo($부모노드)
|
cs |
|
1
2
3
4
5
6
|
//append
var $menu3 = $("#menu3");
$("ul").append($menu3);
//appendTo
$("#menu3").appendTo("ul");
|
cs |
특정 노드의 이전 노드로 이동
|
1
2
|
$(이동노드).insertBefore($기준노드)
$(기준노드).before($노드)
|
|
1
2
3
4
5
6
7
|
var $menu3 = $("#menu3");
var $menu5 = $("#menu5");
//before
$("#menu5").before($menu3);
//insertBefore
$("#menu3").insertBefore($menu5);
|
특정 노드의 다음 노드로 이동
|
1
2
|
$추가노드.insertAfter($기준노드)
$기준노드.after($추가노드)
|
|
1
2
3
4
5
6
7
|
var $menu3 = $("#menu3");
var $menu5 = $("#menu5");
//after
$("#menu5").after($menu3);
//insertAfter
$("#menu3").insertAfter($menu5);
|
노드 삭제하기
|
1
|
$(대상).remove();
|
|
1
2
3
4
|
var $menu3 = $("#menu3");
$menu3.remove();
$("#menu5").remove();
|
자식 노드를 삭제하는 방법은 children()을 사용하면 됩니다.
|
1
|
$("ul").children().remove();
|
반응형
'웹개발 > jquery' 카테고리의 다른 글
| jquery 셀렉터 정리. (0) | 2022.11.24 |
|---|---|
| jquery each .prop .attr .css .val등 주요 함수 (0) | 2022.02.17 |
댓글