요소 생성 및 제거
동적으로 요소 생성
<script>
$(function(){
$("#btn").click(function(){
// <p>~~~~~</p>
// 1. 문자열로 만드는 방법
var el1 = "<p>Create Element By Text</p>";
// 2. DOM 메소드로 만드는 방법 (createElement, createTextNode)
var el2 = document.createElement("p"); // <p></p>
var text = document.createTextNode("Create Element By DOM"); // Create Element By DOM
el2.appendChild(text); // <p>Create Element By DOM</p>
// 3. jQuery로 만드는 방법
var el3 = $("<p></p>").text("Create Element By jQuery");
console.log(el1);
console.log(el2);
console.log(el3);
$("#area1").append(el1, el2, el3);
})
})
</script>
JavaScript
복사
삽입 관련 메소드 part1
•
선택된 요소를 기준으로 새로이 생성된 요소를 추가하는 메소드
•
$(A).append(B) : A요소 내의 뒷부분에 B를 추가 (자손/하위)
•
$(A).prepend(B) : A요소 내의 앞부분에 B를 추가 (자손/하위)
•
$(A).before(B) : A요소 앞부분에 B를 추가 (동위)
•
$(A).after(B) : A요소 뒷부분에 B를 추가 (동위)
삽입 관련 메소드 part2
•
$(B).appendTo(A) : B를 A요소 내의 뒷부분에 추가 (자손/하위)
•
$(B).preparedTo(A) : B를 A요소 내의 앞부분에 추가 (자손/하위)
•
$(B).insertBefore(A) : B를 A요소 앞에 추가 (동위)
•
$(B).insertAfter(A) : B를 A요소 뒤에 추가 (동위)
요소객체 복제 메소드
•
var 변수 = $("선택자").clone([true|false]) : 선택된 요소를 복제해서 반환해주는 메소드
•
true|false : 해당 선택된 요소에 걸려있는 이벤트까지도 복사할껀지 지정 (기본값 false)
요소 객체 제거 및 잘라내기 메소드
•
$("선택자").empty() : 선택된 요소의 모든 하위 요소들 제거시켜주는 메소드
•
var 변수 = $("선택자").remove()/.detach() : 선택된 요소 제거후 해당 제거된 요소를 반환 (잘라내기)
•
remove() : 잘라내기 시 잘라낸 요소의 이벤트 안가져옴
•
detach() : 잘라내기 시 잘라낸 요소의 이벤트까지도 가져옴
