위키
포럼
도구
바뀐글
랜덤

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

 
(사용자 4명의 중간 판 19개는 보이지 않습니다)
4번째 줄: 4번째 줄:
*jQuery의 val(), text(), html() 차이점
*jQuery의 val(), text(), html() 차이점


==val()==
{| class='wikitable'
*form의 선택 요소 텍스트 값을 설정 혹은 받아옴  
! 메소드 !! 설명
|-
| [[jQuery .val()|.val()]] || form의 선택 요소 텍스트 값을 설정 혹은 받아옴  
|-
| [[jQuery .text()|.text()]] || 선택 요소의 텍스트 내용을 설정 및 받아옴
|-
| [[jQuery .html()|.html()]] || 선택 요소에 html을 코드를 넣거나 받아 올 수 있음. [[함수 htmlspecialchars()]] 적용됨.
|}


==text()==
==예시==
*선택 요소의 텍스트 내용을 설정 및 받아옴
<syntaxhighlight lang="html" run>
<div id="div1">여기는 div</div>
<button id="btn-text">text()</button>
<button id="btn-html">html()</button>


==html()==
<hr>
*선택 요소에 html을 코드를 넣거나 받아 올 수 있음
<input type="text" id="input1" value="여기는 input" />
<button id="btn-val">val()</button>


==예시==
<script src="//code.jquery.com/jquery.min.js"></script>
<source lang="javascript">
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
<script>
$(document).ready(function(){
  $(function() {
     $("#button1").click(function(){
     $("#btn-text").click(function() {
        $("#test_id1").text("Hello world!");
      $("#div1").text("안녕 <b>친구들!</b>");
     });
     });
     $("#button2").click(function(){
     $("#btn-html").click(function() {
        $("#test_id2").html("<b>Hello world!</b>");
      $("#div1").html("안녕 <b>친구들!</b>");
     });
     });
     $("#button3").click(function(){
     $("#btn-val").click(function() {
        $("#test_id3").val("Hello Zeta");
      $("#input1").val("안녕 <b>친구들!</b>");
     });
     });
});
  });
</script>
</script>
</head>
</syntaxhighlight>
<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>
* [[jQuery .val()]]
</source>
* [[jQuery .text()]]
* [[jQuery .html()]]


==참고==
==참고==

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 참고

원본 주소 "https://zetawiki.com/w/index.php?title=JQuery_val(),_text(),_html()&oldid=783117"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}