jQuery 메소드와 이벤트 1 ( html(), text(), val(), append(), prepend(), before(), after(), empty(), remove(), detach() )

• html( ), text( ), val( )
  - html( ) : 요소에 작성된 내용을 얻어옴(태그 포함) == innerHTML
  - text( ) : 요소에 작성된 내용을 얻어옴(태그 포함 X) == innerText
  - val( ) : value 속성값을 얻어옴
  
  - html("내용") : 요소에 내용 출력 (태그 인식 O)
  - text("내용") : 요소에 내용 출력 (태그 인식 X)
  - val("내용") : value 속성값을 지정

.cls1{
   color: blue;
}

.sky{
   background-color: skyblue;
}

<div id="area">
   <p class="cls1">기존에 작성되어 있는 요소</p>
</div>

<button type="button" id="btn1">html() 메소드</button>
<button type="button" id="btn2">text() 메소드</button>

<input type="text" id="inputId" value="apple">
<button id="btn3">val() 메소드</button>

// html() 버튼
$("#btn1").on("click", function(){
   
   // 아이디가 area인 요소의 내용을 모두 삭제
   $("#area").html("");
   
   // 아이디가 area인 요소의 내용을 출력 (태그 인식 O)
   $("#area").html("<p class='cls1'>기존에 작성되어 있는 요소</p>");
})

See the Pen 24-12-25 jquery 3-1 by Namu (@Namu-the-sans) on CodePen.

---

See the Pen 24-12-25 jquery 3-2 by Namu (@Namu-the-sans) on CodePen.

---

// text() 버튼
$("#btn2").on("click", function(){

  // 아이디가 area인 요소의 내용을 모두 삭제
  $("#area").text("");
  
  // 아이디가 area인 요소의 내용 출력(태그 인식 X)
  $("#area).text("<p class='cls1'>기존에 작성되어 있는 요소</p>");
})

See the Pen 24-12-25 jquery 3-3 by Namu (@Namu-the-sans) on CodePen.

---

See the Pen 24-12-25 jquery 3-4 by Namu (@Namu-the-sans) on CodePen.

---

// val() 버튼
$("#btn3").on("click", function(){

  // 아이디가 inputId인 요소의 내용을 모두 삭제
  $("#inputId").val("");
  
  // 아이디가 inputId 요소의 내용 출력
  $("#inputId").val("orange");
})

See the Pen 24-12-25 jquery 3-5 by Namu (@Namu-the-sans) on CodePen.

---

See the Pen 24-12-25 jquery 3-6 by Namu (@Namu-the-sans) on CodePen.

---

• 선택자 요소(A)를 기준으로 삽입 메소드 매개변수에
  생성된 요소(B) 또는 함수의 리턴값을 추가
  
  $(A).append(B) : A요소 內 바로 뒤에 B를 추가(자식)
  $(A).prepend(B) : A요소 內 바로 앞에 B를 추가(자식)
  $(A).after(B) : A요소 바로 뒤에 B를 추가(형제)
  $(A).before(B) : A요소 바로 앞에 B를 추가(형제)
  
  
• 생성된 요소(B)를 매개변수로 지정한 선택자(A) 요소에 추가
  (바로 위에서 설명한 메소드와 선택자, 생성구문의 순서가 반대)
  
  $(B).appendTo(A) : B를 A요소 內 바로 뒤에 추가(자식)
  $(B).prependTo(A) : B를 A요소 內 바로 앞에 추가(자식)
  $(B).insertAfter(A) : B를 A요소 바로 뒤에 추가(형제)
  $(B).insertBefore(A) : B를 A요소 바로 앞에 추가(형제)

<div id="area2">
   <ul id="list2"></ul>   <!-- 기준 -->
</div>

$(()=>{
  let count=1;
  
  // append() : 마지막 자식 요소로 추가
  $("#list2").append("<li>리스트" + count++ + "</li>");
  $("#list2").append("<li>리스트" + count++ + "</li>");
  $("#list2").append("<li>리스트" + count++ + "</li>");
  
  // prepend() : 첫 번째 자식 요소로 추가
  $("#list2").prepend("<li>리스트" + count++ + "</li>");
  $("#list2").prepend("<li>리스트" + count++ + "</li>");
  $("#list2").prepend("<li>리스트" + count++ + "</li>");
  
  for(let i=0; i<3; i++){
     const el = "<p>새로 추가된 요소" + i + "</p>";
     
     // before() : 바로 이전 형제 요소 추가
     $("#list2").before(el);
     
     // after() : 바로 다음 형제 요소 추가
     $("#list2").after(el);
   }
})

See the Pen 24-12-25 jquery 3-7 by Namu (@Namu-the-sans) on CodePen.

---

• empty( ) : 자식 요소들을 모두 제거하는 메소드 → 특정 요소의 내부를 비움
• remove( ) : 요소 잘라내기, 관련된 이벤트 삭제되어 없어짐
• detach( ) : 요소 잘라내기, 관련된 이벤트 삭제되지 않고 남아있음

<button id="btn2-1">empty()</button>
<button id="btn2-2">remove()</button>
<button id="btn2-3">detach()</button>
    
<div id="area3">
  <div class="item" id="div3">
    안녕하세요.
  </div>
  <div class="item" id="div4">
    안녕하세요.
  </div>
</div>

<hr>

<div id="area4">
  <div class="item" id="div5">
    안녕하세요.
  </div>
</div>

.sky{
   background-color: skyblue;
}

//empty() 버튼
$("#btn2-1").on("click", function(){

  // empty() : 자식 요소들을 모두 제거하는 메소드
  //           --> 특정 요소 내부를 비움
  
  // 아이디가 area3인 요소의 내부 비우기
  $("#area3").empty();
})

See the Pen 24-12-25 jquery 3-9 by Namu (@Namu-the-sans) on CodePen.

---

// 아이디가 div3인 요소에 마우스가 들어왔다 나갔다 할 때의 동작
$("#div3").hover(function(){

  // 마우스가 들어왔을 때 현재 요소에 sky 클래스 추가
  $(this).addClass("sky");

}, function(){

  // 마우스가 나갔을 때 현재 요소에서 sky 클래스 제거
  $(this).removeClass("sky");
})

See the Pen 24-12-25 jquery 3-9 by Namu (@Namu-the-sans) on CodePen.

---

// remove() 버튼
$("#btn2-2").on("click", function(){{

  // remove : 요소 잘라내기, 관련된 이벤트 삭제됨
  const el = $("#div3").remove();
  
  $("#area4").append(el);
})

See the Pen 24-12-25 jquery 4-1 by Namu (@Namu-the-sans) on CodePen.

---

// detach()
$("#btn2-3").on("click", function(){

  // detach : 요소 잘라내기, 관련된 이벤트도 같이 잘라냄
  const el = $("#div3").detach();
  
  $("#area4").append(el);
})

See the Pen 24-12-25 jquery 4-1 by Namu (@Namu-the-sans) on CodePen.