JQuery_내용과 속성 가져오기 .text(), .html(), .val()

내용과 속성 가져오기

text() - 선택한 요소의 텍스트 내용을 설정하거나 반환한다.
html() - 선택한 요소(HTML 마크업 포함)의 내용을 설정하거나 반환한다.
val() - 필드의 값을 설정하거나 반환한다.

 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        $("#btn1").on("click", function() {
            let mText = $("#test").text();
            alert(mText);
        });
        
        $("#btn2").on("click", function() {
            let node1 = $("#test").html(); // string 반환
            let node2 = document.querySelector("#test"); // object 반환
            
            console.log(node1);
            console.log(node2);
        });
        
        $("#btn3").on("click", function() {
            alert($("#input-test").val());
        });
    });
</script>

    <p id="test">후미진 어느 언덕<input type="text" id="input-test" value="그늘진 어느 언덕"></p>
    <button id="btn1">글자 가지고 오기</button>
    <button id="btn2">html 요소 가지고 오기</button>
    <button id="btn3">value 가지고 오기</button>