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

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

1 개념

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

메소드	설명
.val()	form의 선택 요소 텍스트 값을 설정 혹은 받아옴
.text()	선택 요소의 텍스트 내용을 설정 및 받아옴
.html()	선택 요소에 html을 코드를 넣거나 받아 올 수 있음

2 예시

<p id="p1">This is a paragraph.</p>
<button id="btn-text">text()</button>
<button id="btn-html">html()</button>

<hr>
<input type="text" id="input1" value="This is a input." />
<button id="btn-val">val()</button>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
  $("#btn-text").click(function() {
    $("#p1").text("Hello <b>world</b>!");
  });
  $("#btn-html").click(function() {
    $("#p1").html("Hello <b>world</b>!");
  });
  $("#btn-val").click(function() {
    $("#input1").val("Hello <b>world</b>!");
  });
</script>

3 같이 보기

4 참고

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

@@ 16번째 줄: / 16번째 줄: @@
 ==예시==
 <source lang="javascript">
-<!DOCTYPE html>
+<p id="p1">This is a paragraph.</p>
-<html>
+<button id="btn-text">text()</button>
-<head>
+<button id="btn-html">html()</button>
-<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
+<hr>
+<input type="text" id="input1" value="This is a input." />
+<button id="btn-val">val()</button>
+<script src="//code.jquery.com/jquery.min.js"></script>
 <script>
-$(document).ready(function(){
+  $("#btn-text").click(function() {
-    $("#button1").click(function(){
+    $("#p1").text("Hello <b>world</b>!");
-        $("#test_id1").text("Hello world!");
+  });
-    });
+  $("#btn-html").click(function() {
-    $("#button2").click(function(){
+    $("#p1").html("Hello <b>world</b>!");
-        $("#test_id2").html("<b>Hello world!</b>");
+  });
-    });
+  $("#btn-val").click(function() {
-    $("#button3").click(function(){
+    $("#input1").val("Hello <b>world</b>!");
-        $("#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>
 </source>