"JQuery val(), text(), html()"의 두 판 사이의 차이

2016년 7월 31일 (일) 22:30 판

1 개념

jQuery의 val(), text(), html() 차이점

2 val()

form의 선택 요소 텍스트 값을 설정 혹은 받아옴

3 text()

선택 요소의 텍스트 내용을 설정 및 받아옴

4 html()

선택 요소에 html을 코드를 넣거나 받아 올 수 있음

5 예시

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#button1").click(function(){
        $("#test_id1").text("Hello world!");
    });
    $("#button2").click(function(){
        $("#test_id2").html("<b>Hello world!</b>");
    });
    $("#button3").click(function(){
        $("#test_id3").val("Hello Zeta");
    });
});
</script>
</head>
<body>

<p id="test_id1">This is a paragraph.</p>
<p id="test_id2">This is another paragraph.</p>
<p>Input field: <input type="text" id="test_id3" value="Hello World"></p>

<button id="button1">Set Text</button>
<button id="button2">Set HTML</button>
<button id="button3">Set Value</button>

</body>
</html>

6 참고

http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_dom_html_set

@@ 13번째 줄: / 13번째 줄: @@
 ==예시==
-<source code="html">
+<source lang="javascript">
 <!DOCTYPE html>
 <html>