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

 
(사용자 4명의 중간 판 10개는 보이지 않습니다)
11번째 줄: 11번째 줄:
| [[jQuery .text()|.text()]] || 선택 요소의 텍스트 내용을 설정 및 받아옴
| [[jQuery .text()|.text()]] || 선택 요소의 텍스트 내용을 설정 및 받아옴
|-
|-
| [[jQuery .html()|.html()]] || 선택 요소에 html을 코드를 넣거나 받아 올 수 있음
| [[jQuery .html()|.html()]] || 선택 요소에 html을 코드를 넣거나 받아 올 수 있음. [[함수 htmlspecialchars()]] 적용됨.
|}
|}


==예시==
==예시==
<source lang="html">
<syntaxhighlight lang="html" run>
<div id="div1">여기는 div</div>
<button id="btn-text">text()</button>
<button id="btn-html">html()</button>
 
<hr>
<input type="text" id="input1" value="여기는 input" />
<button id="btn-val">val()</button>
 
<script src="//code.jquery.com/jquery.min.js"></script>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
<script>
   $(function() {
   $(function() {
     $("#btn-text").click(function() {
     $("#btn-text").click(function() {
       $("#div1").text("Hello <b>world</b>!");
       $("#div1").text("안녕 <b>친구들!</b>");
     });
     });
     $("#btn-html").click(function() {
     $("#btn-html").click(function() {
       $("#div1").html("Hello <b>world</b>!");
       $("#div1").html("안녕 <b>친구들!</b>");
     });
     });
     $("#btn-val").click(function() {
     $("#btn-val").click(function() {
       $("#input1").val("Hello <b>world</b>!");
       $("#input1").val("안녕 <b>친구들!</b>");
     });
     });
   });
   });
</script>
</script>
 
</syntaxhighlight>
<div id="div1">This is a div.</div>
<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>
</source>
<jsfiddle height='250'>pjxwz40g</jsfiddle>


==같이 보기==
==같이 보기==

2021년 9월 25일 (토) 21:38 기준 최신판

1 개념

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

2 예시

<div id="div1">여기는 div</div>
<button id="btn-text">text()</button>
<button id="btn-html">html()</button>

<hr>
<input type="text" id="input1" value="여기는 input" />
<button id="btn-val">val()</button>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
  $(function() {
    $("#btn-text").click(function() {
      $("#div1").text("안녕 <b>친구들!</b>");
    });
    $("#btn-html").click(function() {
      $("#div1").html("안녕 <b>친구들!</b>");
    });
    $("#btn-val").click(function() {
      $("#input1").val("안녕 <b>친구들!</b>");
    });
  });
</script>

3 같이 보기

4 참고

문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}