1. append/appendTo, prepend/prependTo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메소드 연습 예제</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
// 마지막에 새로운 요소 추가
$(".box1 ul").append("<li>C/C++</li>");
$("<li>HTML 5</li>").appendTo(".box2 ul");
// 첫 번째에 새로운 요소 추가
$(".box3 ul").prepend("<li>JSP/Servlet</li>");
$("<li>ORACLE</li>").prependTo(".box4 ul");
})
</script>
</head>
<body>
<h3>조작(Manipulation)</h3>
<div class="box box1">
<ul>
<li>자바</li>
<li>스프링</li>
</ul>
</div>
<div class="box box2">
<ul>
<li>javascript</li>
<li>css</li>
</ul>
</div>
<div class="box box3">
<ul>
<li>ASP.NET</li>
<li>PHP</li>
</ul>
</div>
<div class="box box4">
<ul>
<li>MariaDB</li>
<li>MySQL</li>
</ul>
</div>
</body>
</html>
2. before, after
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메소드 연습 예제</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
var a = 0, b = 0;
$(".btn1").click(function () {
$("p.p2").before("<p>앞-"+(++a)+"번째 문장 추가</p>");
});
$(".btn2").click(function () {
$("p.p2").after("<p>뒤-"+(++b)+"번째 문장 추가</p>");
});
});
</script>
</head>
<body>
<h3>조작(Manipulation)</h3>
<div style="margin: 20px;">
<button type="button" class="btn btn1"> Node.js 앞에 추가 </button>
<button type="button" class="btn btn2"> Node.js 뒤에 추가 </button>
</div>
<hr>
<p class="p1">자바스크립트</p>
<p class="p2">Node.js</p>
<p class="p3">vue.js</p>
</body>
</html>
3. wrap, wrapAll, wrapInner
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메소드 연습 예제</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<style type="text/css">
*{
padding: 0; margin: 0;
}
body {
font-size:14px;
font-family:"맑은 고딕", 나눔고딕, 돋움, sans-serif;
}
a {
color: #000;
text-decoration: none;
}
a:hover, a:active {
color: tomato;
text-decoration: underline;
}
.btn{
color:#333;
font-weight:500;
border:1px solid #ccc;
background-color:#fff;
text-align:center;
cursor:pointer;
padding:3px 10px 5px;
border-radius:4px;
}
ul {
list-style: none;
}
li{
padding: 0;
}
h3{
margin: 30px;
}
.box{
box-sizing: border-box;
width: 350px;
min-height: 50px;
margin: 20px auto;
border: 3px dotted gray;
padding: 15px;
}
label {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
// p태그를 각각 새로운 div로 감싸기
$(".btn1").click(function () {
$("p").wrap("<div class='box'></div>");
});
// 모든 ul을 하나의 div로 감싸기. ul 사이에 p태그 등이 존재하면 모든 ul은 묶고 p 태그는 아래로 간다.
$(".btn2").click(function () {
$("ul").wrapAll("<div class='box'></div>");
});
// 선택한 요소 안을 감싸기
$(".btn3").click(function () {
$("p").wrapInner("<label></label>");
});
});
</script>
</head>
<body>
<h3>조작(Manipulation)</h3>
<div style="margin: 20px;">
<button type="button" class="btn btn1"> p 태그를 각 div로 감싸기 </button>
<button type="button" class="btn btn2"> 모든 ul태그를 하나의 div로 감싸기 </button>
<button type="button" class="btn btn3"> p 태그 안에 label 태그 추가 </button>
</div>
<hr>
<p>자바스크립트</p>
<p>CSS</p>
<hr>
<ul>
<li>자바</li>
<li>스프링</li>
</ul>
<h4>데이터베이스</h4>
<ul>
<li>오라클</li>
<li>MYSQL</li>
</ul>
</body>
</html>
4. clone
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>메소드 연습 예제</title>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(function() {
$("ul li").click(function() {
alert($(this).text());
});
$(".btn").click(function() {
// box1의 ul을 복사하여 box2에 추가.
$(".box1 ul").clone().appendTo(".box2");
// 이벤트는 복제되지 않음. 실행순서가 늦어서..
// box3의 ul을 복사하여 box4에 추가. 이벤트도 복제
$(".box3 ul").clone(true).appendTo(".box4");
});
});
</script>
</head>
<body>
<h3>조작(Manipulation)</h3>
<div style="margin: 20px;">
<button type="button" class="btn"> 복사하기 </button>
</div>
<hr>
<div class="box box1">
<ul>
<li>자바</li>
<li>스프링</li>
<li>파이썬</li>
</ul>
</div>
<div class="box box2"></div>
<div class="box box3">
<ul>
<li>HTML</li>
<li>javascript</li>
<li>css</li>
</ul>
</div>
<div class="box box4"></div>
</body>
</html>