220519 jQuery 3

달거북씨 2022. 7. 7. 02:18

1. 요소의 삽입

1-1. 자식으로 삽입

다음 메소드를 사용하면 기존 요소의 내부에 새로운 요소나 콘텐츠를 추가할 수 있다.

.append()	선택된 요소의 마지막에 새로운 요소나 콘텐츠를 추가한다.
.prepend()	선택된 요소의 첫번째에 새로운 요소나 콘텐츠를 추가한다.
.appendTo()	선택된 요소를 해당 요소의 마지막에 추가한다.
.prependTo()	선택된 요소를 해당 요소의 첫번째에 추가한다.
.html()	해당 요소의 HTML 콘텐츠를 반환하거나 설정한다.
.text()	해당 요소의 텍스트 콘텐츠를 반환하거나 설정한다.

[예제 코드]

<p id="user_p">
	jQuery는 
</p>
<script>
	// js
    document.getElementById("user_p").innerHTML 
        = documnet.getElementById("user_p").textContent + "<strong>재미있다!</strong>"
    // jQuery
    $("p").append("<strong>재미있다!</strong>");		// jQuery는 재미있다!
    $("<strong>재미있다!</strong>").appendTo("p");	// jQuery는 재미있다!
    $("p").prepend("<strong>재미있다! </strong>");	// 재미있다! jQuery는
    $("<strong>재미있다! </strong>").prependTo("p");	// 재미있다! jQuery는
    $("p").html("<strong>재미있다!</strong>");		// 재미있다!
    $("p").text("<strong>재미있다!</strong>");		// 재미있다!
</script>

1-2. 형제로 삽입

다음 메소드를 사용하면 기존 요소의 앞이나 뒤에 새로운 요소나 콘텐츠를 추가할 수 있다.

.before()	선택한 요소의 바로 앞쪽에 새로운 요소나 콘텐츠를 추가한다.
.after()	선택한 요소의 바로 뒤쪽에 새로운 요소나 콘텐츠를 추가한다.
.insertBefore()	선택한 요소를 해당 요소의 앞쪽에 추가한다.
.insertAfter()	선택한 요소를 해당 요소의 뒤쪽에 추가한다.

[예제 코드]

<p>
    jQuery는 : 
 </p>
 <script>
    $("p").before("<strong>재미있다.</strong>");		// 재미있다. jQuery는
    $("p").after("<strong>재미있다.</strong>");		// jQuery는 재미있다.
    $("<strong>재미있다.</strong>").insertBefore("p");	// 재미있다. jQuery는
    $("<strong>재미있다.</strong>").insertAfter("p");	// jQuery는 재미있다.
 </script>

1-3. 부모로 감싸기

다음 메소드를 사용하면 기존 요소를 포함하는 새로운 요소나 콘텐츠를 추가할 수 있다.

.wrap()	선택한 요소를 감싸는 새로운 요소를 추가한다.
.wrapAll()	선택한 모든 요소를 모두 한 번에 감싸는 새로운 요소를 추가한다.
.wrapInner()	선택한 요소 '안'을 감싸는 새로운 요소를 추가한다.

[예제 코드]

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
	div{
		border: 2px blue solid;
		margin: 2px;
		padding 2px;
	}
	p{
		background-color: tomato;
		margin: 2px;
		padding: 2px;
	}
	strong{
		color: red;
	}
</style>
</head>
<body>
	 <span>Span Text</span>
	 <strong>Strong Text</strong>
	 <span>Another Span Text</span>
     
	 <script type="text/javascript">
            $('span').wrap('<div><div><p><em><b>S</b></em></p></div></div>')
            $('span').wrapAll('<div><div><p><em><b>S</b></em></p></div></div>')
            $('span').wrapInner('<div><div><p><em><b>S</b></em></p></div></div>')
	 </script>
</body>
</html>

▶ <em> 태그 : 텍스트 요소에 강세를 줄 때 사용

▶ <b> 태그 : 굵은 글씨

[출력 결과 - wrap]

[출력 결과 - wrapAll]

[출력 결과 - wrapInner]

2. 요소의 삭제

다음 메소드를 사용하면 선택한 요소나 콘텐츠를 삭제할 수 있다.

.remove()	선택한 요소를 DOM 트리에서 삭제한다. 삭제된 요소와 연관된 jQuery 데이터나 이벤트도 같이 삭제된다.
.detach()	선택된 요소를 DOM 트리에서 삭제한다. 삭제된 요소와 연관된 jQuery 데이터나 이벤트는 유지된다. .detach() 메소드가 반환하는 jQuery 객체를 .append()나 .prepend()와 같은 메소드에 인수로 전달하면 삭제한 요소를 다시 복구할 수도 있다.
.empty()	선택한 요소의 자식 요소를 모두 삭제한다. 이때 .remove()나 .detach() 메소드와는 달리 선택된 요소 그 자체는 삭제되지 않는다.
.unwrap()	선택한 요소의 부모 요소를 삭제한다.

[예제 코드 1 - .remove()]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
	p{
		background-color : powderblue;
		margein : 6px 0;
	}
</style>
</head>
<body>
	 <p>Hello</p>
	 how are you?
	 <button>실행</button>
	 <script type="text/javascript">
	 	$("button").click(function(){
	 		$("p").remove()
	 	});
	 </script>
</body>
</html>

[출력 결과]

[예제 코드 2 - detach()]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
	p{
		background-color : powderblue;
		margein : 6px 0;
	}
</style>
</head>
<body>
	 <p>Hello</p>
	 <div>how are you?</div>
	 <button id="execution">실행</button>
	 <button id="redo">재실행</button>
	 
	 <script type="text/javascript">
	 	let data = null;
	 	$("#execution").on("click", function(){
	 		data = $("p").detach()
		 	console.log("삭제");
	 	});
	 	
	 	$("#redo").on("click", function(){
	 		$("div").prepend(data);
		 	console.log("재실행");
	 	});
	 </script>
</body>
</html>

[출력 결과]

[예제 코드 3 - .empty(), .unlabWrap()]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style type="text/css">
	div{
		background-color : powderblue;
		margein : 6px 0;
	}
</style>
</head>
<body>
	<div id="container">
		<p>Hello</p>
		<p>How are you</p>
	</div>
	<button>실행</button>
	
	<script type="text/javascript">
		$("button").on("click", function(){
 			$("#container").empty();
 		 	console.log("삭제");
 	 	});
		$("button").on("click", function(){
			$("p").unwrap();
		 	console.log("삭제");
	 	});
	</script>
</body>
</html>

[출력 결과]

728x90

저작자표시 비영리 변경금지 (새창열림)