📝 html(), text(), val()

💡 html()

요소에 작성된 내용을 얻어옴(태그 포함) == innerHTML

💡 text()

요소에 작성된 내용을 얻어옴(태그 포함 x) == innerTEXT

💡 val()

value 속성 값을 얻어옴

💡 html("내용")

요소에 내용 출력 (태그 인식o)

💡 text("내용")

요소에 내용 출력 (태그 인식 x)

💡 val("내용")

value 속성 값을 지정

🔎 코드로 살펴보기

• html

    <style>
        .cls1{color : red}
    </style>
.
.
.
    <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>

• js

// html() 버튼
$("#btn1").on("click", function(){

    // 아이디가 area인 요소의 내용을 모두 삭제
    $("#area").html("");

    // 아이디가 area인 요소의 내용 출력 (태그 인식 O)
    $("#area").html("<p>html() 메소드로 작성된 내용</p>")
});

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

    // 아이디가 area인 요소의 내용을 모두 삭제
    $("#area").text("");

    // 아이디가 area인 요소의 내용 출력 (태그 인식 X)
    $("#area").text("<p>text() 메소드로 작성된 내용</p>")
});

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

    // 아이디가 inputId인 요소의 값 삭제
    $("#inputId").val("");

    // 아이디가 inputId인 요소에 값 대입
    $("#inputId").val("cherry");
})

🔎 출력 화면

• 처음 화면
  

• 'html() 메소드' 버튼을 눌렀을 때
  

• 'text() 메소드' 버튼을 눌렀을 때
  

• 'val() 메소드' 버튼을 눌렀을 때
  

---

📝 삽입 메소드

선택자 요소(A)를 기준으로 삽입 메소드 매개변수에 생성된 요소(B) 또는 함수의 리턴값을 추가

💡 $(A).append(B)

A요소 내 뒷부분에 B를 추가(자식)

💡 $(A).prepend(B)

A요소 내 앞부분에 B를 추가(자식)

💡 $(A).after(B)

A의 요소 뒷부분에 B를 추가(형제)

💡 $(A).before(B)

A의 요소 앞부분에 B를 추가(형제)

생성된 요소(B)를 매개변수로 지정한 선택자(A) 요소에 추가
(part1의 메소드와 선택자, 생성구문의 순서가 반대)

💡 $(B).appendTo(A)

B를 A의 요소 내 뒷부분에 추가(자식)

💡 $(B).prependTo(A)

B를 A의 요소 내 앞부분에 추가(자식)

💡 $(B).insertAfter(A)

B를 A의 요소 뒤에 추가(형제)

💡 $(B).insertBefore(A)

B를 A의 요소 앞에 추가(형제)

📝 제거 메소드

💡 empty()

자식 요소들을 모두 제거하는 메소드
-> 특정 요소 내부를 비움

💡 remove()

요소 잘라내기, 관련 이벤트 삭제

💡 detach()

요소 잘라내기, 관련 이벤트도 같이 잘라냄

🔎 코드로 살펴보기

• html

    <style>
        .lime{ background-color: lime;}
    </style>
.
.
.
    <div id="area2">

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

    </div>


    <hr>

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

• js

$(document).ready(function(){
    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() 바로 이전 형제 요소 추가
        // after() 바로 다음 형제 요소 추가
        $("#list2").before(el);
        $("#list2").after(el);
    }
})

// empty() 버튼
$("#btn2-1").on("click", function(){
    // empty() : 자식 요소들을 모두 제거하는 메소드
    //              -> 특정 요소 내부를 비움

    // id area3인 요소의 내부를 비움
    $("#area3").empty();
})

// id div3인 요소에 마우스가 들어왔다 나갔다 할 때의 동작
// $("#div3").hover(function(){} , function(){})
//              // 들어왔을 때        나갔을 때
$("#div3").hover(function(){
    // console.log( $("div3") );

    // 마우스가 들어왔을 때 현재 요소에 lime 클래스를 추가
    // $("#div3").addClass("lime");
    $(this).addClass("lime");
    
} , function(){

    // 마우스가 나갔을 대 현재 요소에서 lime 클래스를 제거
    $("#div3").removeClass("lime");
});

// remove() 버튼
$("#btn2-2").on("click", function(){
    // remove() : 요소 잘라내기, 관련 이벤트 삭제
    const el = $("#div3").remove();
    console.log(el);
    $("#area4").append(el);
})

// detach() 버튼
$("#btn2-3").on("click", function(){
    // detach() : 요소 잘라내기, 관련 이벤트도 같이 잘라냄
    const el = $("#div3").detach();
    $("#area4").append(el);
})

🔎 출력 화면

• 처음 화면
  

• 'empty()' 버튼을 눌렀을 때
  

• 'remove()' 버튼을 눌렀을 때
  
  -> remove()가 수행되자 .lime에 적용된 css(배경색을 lime 색으로 변경)가 제거된 모습을 볼 수 있다.

• 'detach()' 버튼을 눌렀을 때
  
  -> remove()와는 다르게 관련된 이벤트(.lime에 적용된 배경색)가 함께 잘라진 모습이다.

---