티스토리 뷰

jQuery

[jQuery] .text()

.text()

선택한 요소 내부의 텍스트를 읽거나 변경합니다.


.text()

선택한 요소 내부의 텍스트를 읽거나 변경합니다.

문법(Syntax)

$("선택자").text();
$("선택자").text("문자열");
$("선택자").text("함수");

정의(Definition)

  • .text() 메서드는 선택한 요소의 텍스트를 가져옵니다.
  • .text("문자열") 메서드는 선택한 요소의 텍스트를 변경합니다.
  • .text("함수") 메서드는 선택한 요소에 함수를 설정합니다.

샘플(Sample)

.text() : 리스트의 첫 번째 text 가지고 와서 출력해주는 예제입니다.

Sample1

속성(Attributes)

  • .children() 메서드는 선택한 요소의 모든 자식을 선택합니다.
  • .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
  • .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
  • .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
  • .nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.
  • .nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.
jquery
$(".choice1 .btn1").on("click", function(e){
    e.preventDefault();
    var htmlString = $(".select1").html();
    alert (htmlString);
});
$(".choice1 .btn2").on("click", function(e){
    e.preventDefault();
    var textString = $(".select2").text();
    alert (textString);
});
html
<h3>속성(Attributes)</h3>
<div class="list1">
    <ul>
        <li class="select1">.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.</li>
        <li class="select2">.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
        <li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
        <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
        <li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
        <li>.nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.</li>
    </ul>
</div>
Total
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Sample</title>
    <style>
        .select1:before {content:'.select1'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        .select2:before {content:'.select2'; padding: 4px 4px 2px 4px; font-size: 90%; color: #3d90b7; white-space: nowrap; background-color: #e7f6fd; border-radius: 4px;border: 1px dashed #3d90b7;}
        a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
    </style>
</head>
<body>
    
    <h3>속성(Attributes)</h3>
    <div class="list1">
        <ul>
            <li class="select1">.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.</li>
            <li class="select2">.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
            <li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
            <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
            <li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
            <li>.nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.</li>
        </ul>
    </div>
    
    <div class="choice1">
        <a href="#" class="btn1">클릭하면 select1의 <em>.html()</em> 값을 경고창으로 알려줍니다.</a>
        <a href="#" class="btn2">클릭하면 select2의 <em>.text()</em> 값을 경고창으로 알려줍니다.</a>
    </div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(".choice1 .btn1").on("click", function(e){
            e.preventDefault();
            var htmlString = $(".list1 li:eq(0)").html();
            alert (htmlString);
        });
        $(".choice1 .btn2").on("click", function(e){
            e.preventDefault();
            var textString = $(".list1 li:eq(1)").text();
            alert (textString);
        });
    </script>

</body>
</html>

샘플(Sample)

.text() : 리스트 마지막에 text 요소를 넣어주는 예제입니다. .text()는 태그를 인식하지 못하기 때문에 태그를 문자로 인식하여 출력합니다.

Sample2

속성(Attributes)

  • .children() 메서드는 선택한 요소의 모든 자식을 선택합니다.
  • .closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.
  • .find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.
  • .next() 메서드는 선택한 요소의 다음 요소를 선택합니다.
  • .nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.
jquery
$(".choice2 .off1").on("click", function(e){
    e.preventDefault();
    $(".list2 li:last-child").html("
  • .nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.
  • "); }); $(".choice2 .btn1").on("click", function(e){ e.preventDefault(); $(".list2 li:last-child").html("
  • .nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.
  • "); }); $(".choice2 .btn2").on("click", function(e){ e.preventDefault(); $(".list2 li:last-child").text("
  • .nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.
  • "); });
    html
     <h3>속성(Attributes)</h3>
    <div class="list2">
        <ul>
            <li>.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.</li>
            <li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
            <li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
            <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
            <li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
        </ul>
    </div>
    Total
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>jQuery Sample</title>
        <style>
            a {border: 1px solid #5f6368; padding: 7px 20px 5px 20px; display: inline-block; border-radius: 20px; text-decoration: none;}
        </style>
    </head>
    <body>
        
        <h3>속성(Attributes)</h3>
        <div class="list2">
            <ul>
                <li>.children() 메서드는 선택한 요소의 모든 자식을 선택합니다.</li>
                <li>.closest() 메서드는 선택한 요소의 상위 요소 중 가장 가까운 요소를 선택합니다.</li>
                <li>.find() 메서드는 선택한 요소에서 조건에 맞는 요소를 다시 선택합니다.</li>
                <li>.next() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
                <li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>
            </ul>
        </div>
        
        <div class="choice2">
            <a href="#" class="off1">리셋</a>
            <a href="#" class="btn1">클릭하면 <em>.html()</em> 메서드로 요소를 넣어줍니다.</a>
            <a href="#" class="btn2">클릭하면 <em>.text()</em> 메서드로 요소를 넣어줍니다.</a>
        </div>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            $(".choice2 .off1").on("click", function(e){
                e.preventDefault();
                $(".list2 li:last-child").html("<li>.nextAll() 메서드는 선택한 요소의 다음 요소를 선택합니다.</li>");
            });
            $(".choice2 .btn1").on("click", function(e){
                e.preventDefault();
                $(".list2 li:last-child").html("<li>.nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.</li>");
            });
            $(".choice2 .btn2").on("click", function(e){
                e.preventDefault();
                $(".list2 li:last-child").text("<li>.nextUntil() 메서드는 지정한 선택 요소의 모든 요소를 선택합니다.</li>");
            });
        </script>
    
    </body>
    </html>

    공유하기(Share) 더보기

    • 네이버 블러그 공유하기
    • 페이스북 공유하기
    • 트위터 공유하기
    • 트위터 공유하기
    • 트위터 공유하기

    공감하기(Like) 더보기

    태그(Tag) 더보기

    질문하기(Questions)
    댓글쓰기 폼