추가
추가와 관련된 주요 메소드는 4가지 이다.
before < prepend < content > append > after
- 예제 (문서의 구조 변경) >실행 화면 링크<
<style> .content { border : 1px solid blue; } </style> <div class="content"> content1 </div> <div class="content"> content2 </div> <script src="//code.jquery.com/jquery-3.1.0.min.js"></script> <script> $('.content').before('<div>before</div>'); //content의 형제가 된다. 이전에 등장 $('.content').after('<div>after</div>'); //content의 형제가 된다. 이후에 등장 $('.content').prepend('<div>prepend</div>'); //content의 자식이 된다. 이전에 등장 $('.content').append('<div>append</div>'); //content의 자식이 된다. 이후에 등장 </script>
제거
* remove는 엘리먼트를 제거하는 것이고, empty는 선택된 엘리먼트의 Text 노드를 제거하는 것이다.
- 예제 >실행 화면 링크<
<style> .content { border:2px solid black; margin:20px; min-height: 40px; } </style> <div class="content" id="con1"> content 1 </div> <div class="content" id="con2"> content 2 </div> <script src="//code.jquery.com/jquery-3.1.0.min.js"></script> <input type="button" value="remove" id="btn1" /> <input type="button" value="empty" id="btn2" /> <script> $('#btn1').click(function(){ $('#con1').remove(); }) $('#btn2').click(function(){ //Text노드만 삭제하기 때문에 border가 남는다. $('#con2').empty(); }) </script>
변경
* replaceAll은 제어 대상을 인자로 전달하고, replaceWith는 제어 대상을 먼저 지정한다.
- 예제 >실행 화면 링크<
<!DOCTYPE html> <html> <head> <style> .content { border:2px solid black; margin:20px; min-height: 40px; } </style> </head> <body> <div class="content" id="content1"> content 1 </div> <div class="content" id="content2"> content 2 </div> <input type="button" value="replaceAll" id="btn1" /> <input type="button" value="replaceWith" id="btn2" /> <script src="//code.jquery.com/jquery-3.1.0.min.js"></script> <script> $('#btn1').click(function(){ $('<div>replaceAll--!!</div>').replaceAll('#content1'); // 제어 대상을 인자로 }) $('#btn2').click(function(){ $('#content2').replaceWith('<div>!!--replaceWith</div>'); // 제어 대상을 타겟 }) </script> </body> </html>
노드 복사
- 예제 >실행 화면 링크<
<!DOCTYPE html> <html> <head> <style> .content { border:2px solid black; margin:20px; min-height: 40px; } #clone { border:2px solid tomato; margin:20px; min-height: 40px; } </style> </head> <body> <div class="content" id="content1"> content 1 </div> <div class="content" id="content2"> content 2 </div> <div id="clone">Clone</div> <input type="button" value="replaceAll" id="btn1" /> <input type="button" value="replaceWith" id="btn2" /> <script src="//code.jquery.com/jquery-3.1.0.min.js"></script> <script> $('#btn1').click(function(){ $('#clone').clone().replaceAll('#content1'); // 복사 }) $('#btn2').click(function(){ $('#content2').replaceWith($('#clone').clone()); //복사 }) </script> </body> </html>
노드 이동
* append를 이용한 이동 효과
- 예제 >실행 화면 링크<
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<style>
div {
border:2px solid tomato;
margin:20px;
min-height: 40px;
}
</style>
</head>
<body>
<div class="content" id="content1">
content 1
</div>
<div id="clone">clone</div>
<input type="button" value="append to content" id="btn1" />
<script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
<script>
$('#btn1').click(function(){
$('#content1').append($('#clone'));
})
</script>
</body>
</html>