728x90
사용하는 기본틀
<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
body {
font-size: 9pt;
font-family: "굴림";
}
div, p, ul, li {
border: 1px #eeeeee solid;
margin: 10px;
}
ul {
padding: 10px;
}
li.select {
background-color: #ccc;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<button id="btnAdd">
추가
</button>
<button id="remove">
삭제
</button>
<ul class="menu">
<li>
menu1
</li>
<li>
menu2
</li>
<li class="select">
menu3
</li>
<li>
menu4
</li>
<li>
menu5
</li>
<li>
menu6
</li>
</ul>
</body>
</html>노드생성
<script>
$(document).ready(function(){
$("#btnAdd").click(function(){
var count=0;
$("#btnAdd").click(function(){
count++;
var $li = $("<li>new menu"+count+"</li>");
console.log($li.get(0));
});
})
});
</script>-$()함수 내부에서는 매개변수로 받은 태그 노드 정보를 파싱해 태그와 1:1 대응하는 HTMLiElement객체를 생성하는 작업이 일어난다.
-이렇게 만들어진 자바스크립트 DOM 객체를 좀더 쉽게 사용할 수 있는 jQuery객체를 만들어 반환해 준다.
//자바스크립트로 노드 생성시
$(docoument).ready(function(){
var count=0;
$("#btnAdd").click(function(){
count++;
//신규노드를 생성
var newLi = document.createElement("li");
//신규 노드의 텍스트 노드 생성
var liText = document.createTextNode("new menu"+count);
//텍스트 노드를 신규 노드에 추가
newLi.appendChild(liText);
//텍스트를 위한 신규 노드 출력
console.log(newLi);
});
});-jQuery노드 생성 기능 역시 jQuery가 직접 생성하는 것이 아니라 모두 자바스크립트 DOM 기능을 사용한다는 것
-위의 자바스크립트DOM를 활용한 노드 생성코드를 우리 대신 jQuery 내부에 구현하고 있다는 것
첫번째 자식 노드 추가
//맨앞에 노드 생성
$("#btnAdd").click(function(){
count++;
//prepend
$("ul.menu").prepend("<li>new menu"+count+"</li>");
var $newItem = $("<li>new menu"+count+"</li>");
//prependTo
$newItem.prependTo("ul.menu");
})-insertBefore() 또는 Before()를 이용해서 첫번째 자식노드로 추가할 수 있다.
마지막번째 자식 노드 추가
$("#btnAdd").click(function(){
count++;
$("ul.menu").append("<li>new menu"+count+"</li>");
})특정노드의 이전 위치에 추가
//특정위치 앞에
$("#btnAdd").click(function(){
count++;
//insertBefore
$("<li>new menu"+count+"</li>").insertBefore("ul.menu li.select");
//before
$("ul.menu li.select").before("<li>new menu"+count+"</li>");
});특정노드의 다음 위치에 추가
//특정위치 뒤에
$("#btnAdd").click(function(){
count++;
//insertAfter
$("<li>new menu"+count+"</li>").insertAfter("ul.menu li.select");
//after
$("ul.menu li.select").after("<li>new menu"+count+"</li>")
});정리
|
분류
|
핵심 내용
|
jQuery DOM 핵심
프로퍼티 및 메서드
|
|
노드생성/추가
|
노드생성
|
$("추가노드DOM 문자열")
|
|
첫번째 자식 노드 추가
|
$부모노드.prepend($추가노드)
$추가노드.prependTo($추가노드)
|
|
|
마지막번째 자식 노드 추가
|
$부모노드.append($추가노드)
$추가노드.appendTo($부모노드)
|
|
|
특정노드의 이전 위치에 추가
|
$추가노드.insertBefore($기준노드)
$기준노드.before($추가노드)
|
|
|
특정노드의 다음 위치에 추가
|
$추가노드.insertAfter($기준노드)
$기준노드.after($추가노드)
|
728x90
'프로그래밍 > jQuery' 카테고리의 다른 글
| jQuery 즉시 실행 함수 (0) | 2023.06.23 |
|---|---|
| jQuery완전정복(자바스크립트DOM) (0) | 2023.06.22 |
| 자바스크립트+jQuery 완전 정복 스터디2-INTRO (0) | 2023.06.22 |
| jQuery (attr,prop,addClass) (0) | 2023.06.21 |
