val() - attr('value') , html() - text()

val() / attr('value')

attr('value', ) : 태그의 value 속성값(attribute) 

val( ) : 입력된 property 값

 

 

 

 

    <script>
        $(function(){
            console.log($('#txt').attr('value')); //test
            console.log($('#txt').val()); //test
        });
    </script>


    <input type="text" id="txt" value="test">
    <button id="btn">실행</button>

val()은 value값을 읽어오는 것이다.

attr('value')도 value 속성값을 가져오는 것이다. 

둘다 #txt 선택된 태그의 value값인 test가 출력된다.

 

 

            $('#btn').click(function(){
                console.log('---클릭이벤트---');
                $('#txt').attr('value','111111');//태그 속성값
                console.log($('#txt').attr('value'));
                console.log($('#txt').val());
            });

버튼을 클릭했을 때 attr으로 value값을 변경했다. 

버튼을 클릭했을 때 111111 이라는 값을 확인하였다.

값을 바꾸고 클릭이벤트가 실행되었을 때 attr('value')는 111111그대로이고, val()은 내가 입력한 값으로 변경됨을 확인하였다.

attr('value')는 지정된 속성값(attribute) 을 가져오고, val()은 입력된 프로퍼티(property)값을 가져오기 때문이다.

 

 

 

 

 

            $('#btn').click(function(){
               $('#txt').val('111111');
               console.log($('#txt').attr('value'));
               console.log($('#txt').val());
            })

이번에는 val으로 값을 변경하였다. 프로퍼티가 변경되는 것이고, value 속성값은 변경하지 않았기 때문에 처음에 지정해준 test 그대로 존재한다.

처음 버튼을 클릭해서 실행했을 때 프로퍼티를 111111으로 변경하였다.

입력내용을 변경하여도 클릭할 때마다 프로퍼티값이 111111으로 변경되기 때문에 해당값이 출력되고,

value 속성은 처음에 지정해주었던 test가 유지된다.

 

 

 

 

html() : innerHTML

text() : innerText

 

 

 

    <script>
        $(function(){
            console.log($('#d3').html());
            console.log($('#d3').text());
        });
    </script>

    <div id="d1"></div>
    <div id="d2"></div>
    <div id="d3">
        <p>#d3 문단 내용</p>
        <p>#d3 문단 내용</p>
    </div>

 

html()과 text()를 비교하였다. html은 태그를 포함한 전체가 출력되고, text는 텍스트내용만 가져온 것이 확인된다.

 

 

 

 

        $(function(){
            $("#d1").html('<h2>제목태그</h2>');
            $("#d2").text('<h2>제목태그</h2>');
        });

h2태그가 포함된 값을 추가하여 비교했다.

html에는 h2 태그 속성이 적용되었고, text는 <h2>태그가 말그대로 텍스트로 입력되었다.