<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>요소 생성 및 제거 메소드</title>
<script src="https://code.jquery.com/jquery-3.7.1.slim.js"></script>
<style>
.added {color: aquamarine;}
.item {
background-color: yellowgreen;
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
margin: 5px;
}
.item span {
font-size: 25px;
color: white;
font-weight: bold;
}
.purple {background-color: purple;}
</style>
</head>
<body>
<h1>요소 생성 및 제거</h1>
<h3>* 동적으로 요소 생성</h3>
<button id="btn">요소 생성</button>
<div id="area1"></div>
<script>
$(() => {
$('#btn').click(function() {
// 1. 문자열 생성
let el1 = '<p>Create Element By Text</p>';
// 2. DOM메소드로 만드는 방법(createElement, createTextNode)
let el2 = document.createElement('p'); // <p></p>
let text = document.createTextNode('Create Element By Text');
el2.appendChild(text);
// 3. jQuery로 만드는 방법
// let el3 = $('<p></p>').text('Create Element By Text');
// console.log(el3);
let el3 = $('<p>Create Element By Text</p>');
console.log(el3);
$('#area1').append(el1, el2, el3);
});
})
</script>
<hr>
<h3>* 삽입 관련 메서드 part1</h3>
<p>
선택된 요소를 기준으로 새로운 요소들을 추가시켜주는 메서드<br><br>
$(A).append(B) : A요소 내에 뒷부분에 B를 추가(자손/하위)<br>
$(A).prepend(B) : A요소 내에 앞부분에 B를 추가(자손/하위)<br><br>
$(A).after(B) : A요소 뒷부분에 B를 추가(동위)<br>
$(A).before(B) : A요소 앞부분에 B를 추가(동위)<br><br>
</p>
<h3>* 삽입 관련 메서드 part2</h3>
<p>
선택된 요소를 기준으로 새로운 요소들을 추가시켜주는 메서드<br><br>
$(B).appendTo(A) : A요소 내에 뒷부분에 B를 추가(자손/하위)<br>
$(B).prependTo(A) : A요소 내에 앞부분에 B를 추가(자손/하위)<br><br>
$(B).insertAfter(A) : A요소 뒷부분에 B를 추가(동위)<br>
$(B).insertBefore(A) : A요소 앞부분에 B를 추가(동위)<br><br>
</p>
<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>
$(() => {
// part1
$('#test1').append('<span class="added">B</span>');
$('#test2').prepend('<span class="added">B</span>');
$('#test3').before('<span class="added">B</span>');
$('#test4').after('<span class="added">B</span>');
// part2
/*
$('<span class="added">B</span>').appendTo('#test1');
$('<span class="added">B</span>').prependTo('#test2');
$('<span class="added">B</span>').insertAfter('#test3');
$('<span class="added">B</span>').insertBefore('#test4');
*/
})
</script>
<hr>
<h3>* 요소 객체 복제 메서드</h3>
<p>
$('선택자').clone([true|false]) : 선택된 요소를 복제하여 반환해주는 메서드<br>
- true|false : 복제할 요소에 걸려있는 이벤트까지도 복제할 것인지를 지정(기본값 false)
</p>
<div id="clone-test">
<!-- 복제할 요소-->
<div id="item1" class="item">
<span>안녕</span>
</div>
</div>
<button id="clone">복제하기</button>
<div id="clone-result"></div>
<script>
$(() => {
// 이벤트 넣기
$('.item').hover(function() {
$(this).addClass('purple');
}, function() {
$(this).removeClass('purple');
})
// 버튼을 누르면 복제
$('#clone').click(function() {
// const copy = $('#item1').clone(); 이벤트복제 x(기본값)
const copy = $('#item1').clone(true); // 이벤트까지 복제
$('#clone-result').append(copy);
// $('#clone-result').append($('#item1').clone(true));
// $('#item1').clone(true).appendTo('#clone-result');
});
})
</script>
<hr>
<h3>* 요소를 제거 및 잘라내기 메소드</h3>
<p>
$('선택자').empty() : 선택된 요소의 하위 요소들을 제거해주는 메서드<br><br>
변수 = $('선택자').remove|detach() : 선택된 요소를 제거한 후 해당 요소를 반환해주는 메서드<br>
> remove() : 잘라내기할 때 잘라낸 요소의 이벤트를 가져오지 않음<br>
> detach() : 잘라내기할 때 잘라낸 요소의 이벤트를 가져옴<br>
</p>
<div id="remove-test">
<!-- 제거할 요소 -->
<div id="item2" class="item">
<span>안녕</span>
</div>
</div>
<button id="empty">제거</button>
<button id="remove">잘라내기(remove)</button>
<button id="detach">잘라내기(detach)</button>
<div id="remove-result"></div>
<script>
$(() => {
$('#empty').click(function() {
// $('#item2').empty(); // 'item2'요소의 하위요소를 삭제 <span>안녕</span>
$('#remove-test').empty(); // div 통째로 삭제
});
$('#remove').click(function() {
const el = $('#item2').remove();
$('#remove-result').append(el);
});
$('#detach').click(function() {
const el = $('#item2').detach();
$('#remove-result').append(el);
});
})
/*
요소.css('스타일속성','값') : 변경
요소.css('스타일속성') : 반환
요소.val('텍스트') : 속성 value의 값 변경
요소.val() : 속성 value의 값 반환
요소.html|text('텍스트') : 변경
요소.html|text() : 반환
요소.attr('그외속성명', '값') : 변경
요소.attr('그외속성명') : 반환
요소.이벤트(function() {})
요소.addClass('클래스명') : 클래스 삽입
요소.removeClass('클래스명') : 클래스 제거
*/
</script>
</body>
</html>