[jQuery] 07. 요소생성 및 제거

요소 생성 및 제거

동적으로 요소 생성

<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>

---

삽입 관련 메소드 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() : 잘라내기 시 잘라낸 요소의 이벤트까지도 가져옴