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>

 

저작자표시 동일조건

'쌍용강북교육센터 > 10월' 카테고리의 다른 글

1014_Servlet/JSP : EL(Expression Language)과 JSTL (ch10)  (0) 2021.12.28
1028_jQuery : each - break 구현  (0) 2021.10.28
1027_jQuery : 선택자 Selectors  (0) 2021.10.28
1027_jQuery : jQuery, Core  (0) 2021.10.28
1022_JSP/Servlet : 파일처리  (0) 2021.10.25

+ Recent posts

티스토리툴바