SeouliteLab

jQuery의 .text() 메소드: 텍스트 내용 설정 및 반환하기 본문

프로그래밍

jQuery의 .text() 메소드: 텍스트 내용 설정 및 반환하기

Seoulite Lab 2024. 4. 8. 08:05

다양한 .text() 메소드 예제

jQuery의 .text() 메소드는 선택한 요소의 텍스트 내용을 설정하거나 반환합니다. 이를 통해 웹 페이지의 텍스트를 동적으로 조작할 수 있습니다. 아래 예제들을 통해 이 메소드의 활용법을 살펴보겠습니다.

예제 1: 텍스트 내용 설정

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .text() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#changeText").click(function(){
        $("p").text("새로운 텍스트 내용");
      });
    });
  </script>
</head>
<body>

<p>원래의 텍스트 내용</p>
<button id="changeText">텍스트 변경</button>

<!-- 출력 결과: ("p" 요소의 텍스트 내용이 "새로운 텍스트 내용"으로 변경됨) -->

</body>
</html>

예제 2: 텍스트 내용 반환

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .text() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#getText").click(function(){
        var text = $("p").text();
        alert("텍스트 내용: " + text);
      });
    });
  </script>
</head>
<body>

<p>원래의 텍스트 내용</p>
<button id="getText">텍스트 내용 가져오기</button>

<!-- 출력 결과: (클릭 시 "p" 요소의 텍스트 내용이 알림으로 출력됨) -->

</body>
</html>

예제 3: 여러 요소의 텍스트 설정

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .text() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("li").text("목록 변경됨");
    });
  </script>
</head>
<body>

<ul>
  <li>항목 1</li>
  <li>항목 2</li>
</ul>

<!-- 출력 결과: (모든 <li> 요소의 텍스트 내용이 "목록 변경됨"으로 변경됨) -->

</body>
</html>

예제 4: 텍스트 내용에 HTML 적용

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .text() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("p").text("<strong>강조된 텍스트</strong>");
    });
  </script>
</head>
<body>

<p>원래의 텍스트 내용</p>

<!-- 출력 결과: ("<strong>강조된 텍스트</strong>" 문자열 그대로 출력됨) -->

</body>
</html>

예제 5: 특정 범위의 텍스트 변경

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .text() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("p").eq(1).text("두 번째 단락의 텍스트 변경됨");
    });
  </script>
</head>
<body>

<p>첫 번째 단락의 텍스트</p>
<p>두 번째 단락의 텍스트</p>

<!-- 출력 결과: (두 번째 <p> 요소의 텍스트 내용이 "두 번째 단락의 텍스트 변경됨"으로 변경됨) -->

</body>
</html>

.text() 메소드를 사용하면 선택한 요소의 텍스트 내용을 설정하거나 반환할 수 있습니다. 이를 통해 웹 페이지의 텍스트를 동적으로 조작할 수 있습니다. 위 예제들을 통해 이 메소드의 활용법을 익혀보세요.

저작자표시 비영리 변경금지

'프로그래밍' 카테고리의 다른 글

jQuery의 .wrap() 메소드: 요소 감싸기  (0) 2024.04.08
jQuery의 .unwrap() 메소드: 부모 요소 제거하기  (0) 2024.04.08
jQuery의 .replaceWith() 메소드: 요소 교체하기  (0) 2024.04.08
jQuery의 .replaceAll() 메소드: 요소 교체하기  (0) 2024.04.08
jQuery의 .remove() 메소드: 요소를 제거하기  (0) 2024.04.08
'프로그래밍' Related Articles more