jQuery를 이용해서 노드를 추가할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>node add</title>
<script src="../js/jquery-3.5.1.min.js"></script>
<script>
var count = 0;
var count2 = 0;
var count3 = 0;
var count4 = 0;
$(document).ready(function () {
var $menu = $("ul.menu");
$("#addBtn").click(function () {
// 신규 노드를 첫번째 자식노드로 추가
++count;
$newMenu = $("<li>newMenu" + count + "</li>");
$menu.prepend($newMenu);
});
$("#addBtn2").click(function(){
++count2;
$newMenu = $("<li>newMenu" + count2 + "</li>");
$menu.append($newMenu);
});
$("#addBtn3").click(function(){
++count3;
$newMenu = $("<li>새메뉴" + count3 + "</li>");
$("ul.menu li.select").before($newMenu);
});
$("#addBtn4").click(function(){
++count4;
$newMenu = $("<li>새메뉴" + count4 + "</li>");
$("ul.menu li.select").after($newMenu);
});
});
</script>
</head>
<body>
<input type="button" id="addBtn" value="맨 앞에 추가">
<input type="button" id="addBtn2" value="맨 뒤에 추가">
<input type="button" id="addBtn3" value="기준 노드 앞에 추가 추가">
<input type="button" id="addBtn4" value="기준 노드 뒤에 추가 추가"><br>
<ul class="menu">
<li id="menu1">Menu#1</li>
<li id="menu2">Menu#2</li>
<li id="menu3" class="select">Menu#3(class = "select")</li>
<li id="menu4">Menu#4</li>
<li id="menu5">Menu#5</li>
</ul>
</body>
</html>
728x90
반응형
'HTML > jQuery 기초' 카테고리의 다른 글
| [jQuery] 노드 삭제하기 (0) | 2020.08.04 |
|---|---|
| [jQuery] 노드 움직이기 (0) | 2020.08.04 |
| [jQuery] 노드 실습 (0) | 2020.08.03 |
| [jQuery] 형제 노드 (0) | 2020.08.03 |
| [jQuery] 부모 노드 (0) | 2020.08.03 |
