코밍이의 하루
[JQuery] 객체 조작 메소드 - 객체 편집 메소드 본문
1. 개발 환경
| 구분 | 내용 |
| 사용 언어 | HTML5, CSS3, JS, jQuery |
| 개발환경 | Visual Studio Code |
| 참고 도서 | [Do it] 자바스크립트 + 제이쿼리 입문 |
| 웹브라우저 | Chrome |
2. 주요 문법
1) 객체 편집 메소드
- 객체를 생성하거나 삭제 또는 복제할 때 사용
| 종류 | 사용법 | 설명 |
| before() | $("요소 선택").before("새 요소"); | 선택한 요소의 이전 위치에 새 요소 추가 |
| after() | $("요소 선택").after("새 요소"); | 선택한 요소의 다음 위치에 새 요소 추가 |
| append() | $("요소 선택").append("새 요소"); | 선택한 요소의 마지막 위치에 새 요소 추가 |
| appendTo() | $("새 요소").appendTo("요소 선택"); | 선택한 요소의 마지막 위치에 새 요소 추가 |
| prepend() | $("요소 선택").prepend("새 요소"); | 선택한 요소의 맨 앞 위치에 새 요소 추가 |
| prependTo() | $("새 요소").prependTo("요소 선택"); | 선택한 요소의 맨 앞 위치에 새 요소 추가 |
| insertBefore() | $("새 요소").insertBefore("요소 선택"); | 선택한 요소의 이전 위치에 새 요소 추가 |
| insertAfter() | $("새 요소").insertAfter("요소 선택"); | 선택한 요소의 다음 위치에 새 요소 추가 |
| clone() | $("요소 선택").clone(true or false); | - 선택한 문서 객체 복제 - 이 때 인자값이 true일 경우 하위 요소까지 모두 복제하고, false일 경우에는 선택한 요소만 복제 |
| empty() | $("요소 선택").empty(); | 선택한 요소의 하위 내용들을 모두 삭제 |
| remove() | $("요소 선택").remove(); | 선택한 요소를 삭제 |
| replaceAll() replaceWith() |
$("새 요소").replaceAll("요소 선택"); $("요소 선택").replaceWith("새 요소"); |
선택한 요소들을 새 요소로 교체 |
| unwrap() | $("요소 선택").unwrap(); | 선택한 요소의 부모 요소 삭제 |
| wrap() | $("요소 선택").wrap("새 요소"); | 선택한 요소를 새 요소로 각각 감싼다 |
| wrapAll() | $("요소 선택").wrapAll(); | 선택한 요소를 새 요소로 한꺼번에 감싼다 |
| wrapInner() | $("요소 선택").wrapInner("새 요소"); | 선택한 요소의 내용을 새 요소로 각각 감싼다 |
3. 소스 코드 및 실행 결과
- jq_selec3_9_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 객체 조작 및 생성 </title>
<script src="js/jquery.js"></script>
<script>
$(function( ){
$("#wrap p:eq(2)").after("<p>After</p>");
$("<p>insertAfter</p>").insertAfter("#wrap p:eq(1)");
$("#wrap p:eq(1)").before("<p>Before</p>");
$("<p>insertBefore</p>").insertBefore("#wrap p:eq(0)");
});
</script>
</head>
<body>
<div id="wrap">
<p>내용1</p>
<p>내용2</p>
<p>내용3</p>
</div>
</body>
</html>
- jq_selec3_10_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 객체 조작 및 생성 </title>
<script src="js/jquery.js"></script>
<script>
$(function( ){
$("<li>appendTo</li>").appendTo("#listZone");
$("#listZone").prepend("<li>prepend</li>");
});
</script>
</head>
<body>
<ul id="listZone">
<li>리스트</li>
</ul>
</body>
</html>
- jq_selec3_11_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 객체 조작 및 생성 </title>
<script src="js/jquery.js"></script>
<script>
$(function( ){
var copyObj = $(".box1").children().clone();
$(".box2").remove();
$(".box3").empty();
$(".box3").append(copyObj);
});
</script>
</head>
<body>
<div class="box1">
<p>내용1</p>
<p>내용2</p>
</div>
<div class="box2">
<p>내용3</p>
<p>내용4</p>
</div>
<div class="box3">
<p>내용5</p>
<p>내용6</p>
</div>
</body>
</html>
- jq_selec3_12_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 객체 조작 및 생성 </title>
<script src="js/jquery.js"></script>
<script>
$(function( ){
$("h2").replaceWith("<h3>replace method</h3>");
$("<p>Change</p>").replaceAll("div");
});
</script>
</head>
<body>
<section class="box1">
<h2>제목1</h2>
<div>내용1</div>
<div>내용2</div>
</section>
<section class="box2">
<h2>제목2</h2>
<div>내용3</div>
<div>내용4</div>
</section>
</body>
</html>
- jq_selec3_13_test.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title> 객체 조작 및 생성 </title>
<script src="js/jquery.js"></script>
<script>
$(function( ){
$("strong").unwrap();
$(".ct1").wrap("<div />");
$(".ct2").wrapAll("<div />");
$("li").wrapInner("<h3 />");
});
</script>
<style>
div{background-color:aqua;}
</style>
</head>
<body>
<h1 id="tit_1">
<strong>객체 조작 및 생성</strong>
</h1>
<p class="ct1">내용1</p>
<p class="ct1">내용2</p>
<p class="ct2">내용3</p>
<p class="ct2">내용4</p>
<ul>
<li>내용3</li>
<li>내용4</li>
</ul>
</body>
</html>
'웹언어 공부 > JQuery' 카테고리의 다른 글
| [JQuery] 마우스 이벤트 (0) | 2021.08.20 |
|---|---|
| [JQuery] 이벤트 메소드 (0) | 2021.08.19 |
| [JQuery] 객체 조작 메소드 - 수치 조작 메소드 (0) | 2021.08.18 |
| [JQuery] 객체 조작 메소드 - 속성 조작 메소드 (0) | 2021.08.18 |
| [JQuery] 탐색 선택자 - 콘텐츠 탐색 선택자 (0) | 2021.08.18 |
'웹언어 공부/JQuery' Related Articles
more
