val ()과 text ()의 차이점


답변:


284

.val()입력 요소 (또는 값 속성이있는 모든 요소)에서 .text()작동하며 입력 요소에서는 작동하지 않습니다. .val()유형에 관계없이 입력 요소의 값을 가져옵니다. .text()일치하는 모든 요소의 innerText (HTML이 아님)를 가져옵니다.

.text()

결과는 일치하는 모든 요소의 결합 된 텍스트 내용을 포함하는 문자열입니다. 이 방법은 HTML 및 XML 문서 모두에서 작동합니다. 입력 요소에 사용할 수 없습니다. 입력 필드 텍스트의 경우 val 속성을 사용하십시오.

.val()

일치하는 첫 번째 요소의 value 속성 내용을 가져옵니다.


3
재미있는 것은-그들이 동일하지 않을 수도 있음을 고려textarea someTextArea.html() !== someTextArea.val()
Maciej Jankowski

textarea.html ( 'content')을 사용하여 콘텐츠를로드하지 마십시오. jQuery 동적으로 일부 내용을로드했습니다. 재미있는 부분은 저장 버튼을 클릭했을 때였습니다. 이 작업 후에는 텍스트 영역의 내용이 더 이상 변경되지 않았습니다. .val ( 'content')로 내용을 설정하면이 문제가 나타나지 않았습니다. 이유를 알 수는 없지만 DOM 캐시 와이 두 가지 방법의 다른 동작과 관련이 있다고 생각합니다.
Erik Čerpnjak

25

text ()는 일치하는 모든 요소 (예 : p, div 등)의 결합 된 텍스트 내용을 반환합니다. val ()은 입력 요소 (예 : 입력, 선택 등)의 값을 얻는 데 사용됩니다.

공식 문서 text ()에 따르면 입력 요소와 함께 사용하면 안됩니다


1

val ()은 (확인란, 텍스트 등)과 같은 모든 HTML 입력 유형에서 값을 가져 오는 데 사용됩니다. 여기서 사용자는 값을 입력 할 수 있습니다. 전의:-

<input type="text" id="txt_name" /> 
 <input type="checkbox" name="vehicle" value="Bike" id="chk_byk" class="ss">bike<br>   
<script type="text/javascript">
 $(document).ready(function () {

            $("#btn_submit").click(function () {
                alert($("#chk_byk").val());
            });

            });


    </script> 

여기서 text ()는 사용자가 (p, div 등)과 상호 작용하지 않는 html 요소에서 값을 가져 오는 데 사용됩니다.

    <p id="p1">Hi how are u??</p>
 <div id="dv5">Debendra</div>

 <script type="text/javascript">

        $(document).ready(function () {

            $("#btn_submit").click(function () {
                alert($("#dv5").text());
            });

            });


    </script>

0

.val () 함수는 입력 요소에서 값을 반환하고 .text () 함수는 입력 요소 이외의 값을 반환합니다. 이 함수에 문자열 인수를 전달 하여 호출 요소의 값설정할 수도 있습니다 . 아래 코드는 .val () 및 .text () 함수를 사용하여 값을 DOM 요소로 설정하는 방법을 보여줍니다.

HTML 부분 :

<form id="form1"><input id="first" type="text" /><input type="submit" /></form>
<div id="second">Click the "Submit Query" to see it work</div>

jquery 부분 :

$(document).on("submit", "form", function (e) {
    $("#first").val("This input is set by .val() function");
    $("#second").text("A new text is set using .text() function!");
    return false;
})

데모 : http://jsfiddle.net/urhys9zj/6/

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.