고래씌
[jQuery] 9. 요소생성 및 제거 본문
■ 모든 html파일에 아래와 같은 style 적용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>09_요소생성및제거</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.added{
color:palegreen;
}
.item{
background-color: yellowgreen;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin: 5px;
}
.item span{
font-size: 25px;
font-weight: bold;
color: white;
}
.lime{
background-color: lime;
}
</style>
</head>
1. 동적으로 요소 생성
▶ 버튼을 클릭하면 동적으로 요소가 생성되도록 적용시켜보겠다.
script태그 안에 작동하는 구문을 추가해보도록 하겠다.
|
<button id="btn">요소 생성</button>
<div id="area1"></div>
<script>
$(function(){
$("#btn").click(function(){
// 이 안에서 작성 })
})
</script>
|
☞ id 가 "btn"인 button 태그 클릭시 동작하도록 설정
① 문자열로 생성하는 방법
|
const el1 = "<p>Create Element By Text</p>";
|
② DOM 메소드로 만드는 방법(createElement, create TextNode, ...)
☞ createElement : 지정한 tagName 의 HTML 요소를 만들어 반환
☞ createTextNode : 텍스트 노드를 반환
☞ el2에 <p>문자열</p> 추가
③ jquery를 이용해서 만드는 방법
|
const el3 = $("<p></p>").text("Create Element By jQuery");
console.log(el1, el2, el3);
|
☞ el3은 출력이 안됨
▶ js 방식
☞ js의 한번에 여러개 요소를 추가한다.(append) 한개만 추가할 경우 (appendChild)
☞ el2 만 정상출력되는 것을 확인
☞ 이것을 모두 정상 출력되게 하려면 jQuery 방식을 이용하여야 한다.
▶ jQuery 방식
☞ el1, el2, el3 모두 정상 출력되는 것을 확인할 수 있다.
2-1. 삽입 관련 메소드 part 1
: 선택된 요소를 기준으로 새로이 생성된 요소를 추가하는 메소드
- $(A).append(B) : A요소 내에 뒷부분에 B요소를 추가 (자손/하위)
- $(B).prepend(B) : A요소 내에 앞부분에 B요소를 추가 (자손/하위)
- $(A).before(B) : A요소 앞에 B를 추가 (동위)
- $(A).after(B) : A요소 뒤에 B를 추가 (동위)
<h1 id="test1"><span>A</span></h1>
<h1 id="test2"><span>A</span></h1>
<h1 id="test3"><span>A</span></h1>
<h1 id="test4"><span>A</span></h1>|
<script>
$(function(){
// part1
// 추가할 아이템 : <span class='added'>B</span>
const b = `<span class='added'>B</span>`;
$("#test1").append(b);
$("#test2").prepend(b);
// => A바로 뒤에 추가되어 자식요소가 되니 상속받아 h1 이 적용된것 $("#test3").before(b);
$("#test4").after(b);
})
</script>
|
2-2. 삽입 관련 메소드 part2
- $(B).appendTo(A) : B를 A요소 내에 뒷부분에 추가 (자손/하위)
- $(B).prependTo(A) : B를 A요소 내에 앞부분에 추가 (자손/하위)
- $(B).insertBefore(A) : B를 A요소 앞에 추가(동위)
- $(B).insertAfter(B) : B를 A요소 뒤에 추가 (동위)
|
<script>
$(function(){
// part1
const b = `<span class='added'>B</span>`;
// part2
$(b).appendTo("#test1");
$(b).prependTo("#test2");
$(b).insertBefore("#test3");
$(b).insertAfter("#test4");
})
</script>
|
3. 요소객체 복제 메소드 => 복제 : 깊은 복사 의미
- const 변수 = $("선택자").clone(true/false)
: 선택된 요소를 복제해서 반환해주는 메소드
=> true / false : 해당 선택된 요소에 걸려있는 이벤트까지 포함해서 복사할것인지 여부를 지정(true일 시 이벤트 포함하여 복사)
<button id="clone">복제</button>
<div id="clone-test">
<!--
복제할 요소
-->
<!-- #item1.item>span{안녕} -->
<div id="item1" class="item">
<span>안녕</span>
</div>
<!-- 복제한 결과를 넣을 공간 -->
<div id="clone-result">
</div>
</div>
▶ 복제버튼 클릭시 item 요소를 복사해서 clone-result에 붙여넣기
<script>
$(function(){
$("#clone").click(() => {
const copy = $("#item1").clone();
// $("#clone-result").append(copy); // clone함수를 이용해서 복사한 것이 깊은복사
// $("#clone-result").append($("#item1")); // 얕은복사
$("#item1").clone(true).appendTo("#clone-result"); // 위 $("#clone-result").append(copy); 코드와 동일
// clone(true) => true를 추가하면 이벤트 값도 같이 복사하는 것을 의미한다.
})
})
☞ copy라는 상수에 id가 item1인 값을 clone을 사용하여 복사
☞ $("#clone-result").append(copy); => 복제한 결과를 넣은 공간에 깊은 복사하여 붙여넣기함
☞ 이 코드를 한줄로 줄이면...
=> $("#item1").clone(true).appendTo("#clone-result"); 가 된다.
☞ 여기서 복제한 것에 그대로 이벤트도 복사하려면 clone(true) true값은 반드시 넣어야 한다.
▶ hover를 이용하여 이벤트 적용되는지 확인
<script>
$(function(){
// 복제버튼 클릭시 item요소를 복사해서 clone-result에 붙여넣기
$("#clone").click(() => {
const copy = $("#item1").clone();
// $("#clone-result").append(copy); // clone함수를 이용해서 복사한 것이 깊은복사
// $("#clone-result").append($("#item1")); // 얕은복사
$("#item1").clone(true).appendTo("#clone-result"); // 위 $("#clone-result").append(copy); 코드와 동일
// clone(true) => true를 추가하면 이벤트 값도 같이 복사하는 것을 의미한다.
})
$('.item').hover(function(){ // 복제한다고 해서 .item 클래스도 같이 복사안되는 것은 아님
$(this).addClass("lime");
}, function(){
$(this).removeClass('lime');
})
// => clone(true) 한 결과 복제한 값도 모두 hover가 적용된 것을 볼 수 있음
})
☞ 복제버튼 클릭하면 안녕이 추가되고 복제된거에도 이벤트 적용됨
4. 요소 객체 제거 잘라내기 메소드
▶ $("선택자").empty() : 선택된 요소의 모든 "하위"요소들을 제거
▶ const 변수 = $("선택자").remove()/datach() : 선택된요소 제거후 반환
- .remove() : 잘라내기 후 잘라낸 요소의 이벤트는 가져오지 않음
- .datach() : 잘라내기 후 잘라낸 요소의 이벤트도 함께 가져옴
<div id="remove-test" style="border: 3px solid red; width:110px; height:110px;">
<!-- 제거할 요소 -->
<div id="item2" class="item"><span>안녕</span></div>
</div> <script>
$(function(){
$("#empty").click(function(){
$("#remove-test").empty();
})
$("#remove").click(function(){
$("#item2").remove().appendTo("#remove-result");
})
$("#detach").click(function(){
$("#item2").detach().appendTo("#remove-result");
})
})
</script>
☞ remove는 hover이벤트가 적용안됨
☞ datach는 hover 이벤트 적용됨
5. 응용문제
- 복제버튼 클릭시 현재 버튼의 부모요소인 div를 복제시켜서 result에 붙여넣기
- 삭제버튼 클릭시 현재 버튼의 부모요소인 div를 삭제시키기
- item요소가 하나일때는 삭제버튼눌러도 삭제가 안되게
<div id="test" class="item">
<button class="copy">복제</button>
<button class="delete">삭제</button>
</div>
<div id="result">
</div>
<script>
$(function(){
$(".copy").click(function(){
$(this).parent().clone(true).appendTo("#result");
// 현재 클릭한 복제버튼의 부모를 복사
})
$(".delete").click(function(){
if($('.delete').length > 1){
$(this).parent().remove();
// 현재 클릭되어진 버튼의 부모요소를 가져와서 삭제
}
})
})
</script>
☞ 복제 버튼을 클릭하면 복제가 된다. 삭제또한 되지만, 요소가 하나밖에 없으면 더이상 삭제되지 않는다.
'Front-End > jQuery' 카테고리의 다른 글
| [jQuery] 11. 종합응용예시(부트스트랩) (0) | 2023.11.15 |
|---|---|
| [jQuery] 10. 추가적인 메소드(each, is 메소드) (0) | 2023.11.15 |
| [jQuery] 8. 영역 관련 메소드(innerHTML속성과 관련된 메소드) (1) | 2023.11.15 |
| [jQuery] 7. 탐색(순회) 메소드 - 동위 (0) | 2023.11.15 |
| [jQuery] 6. 탐색(순회) 메소드 - 자손 (0) | 2023.11.15 |
