.text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

2019.03.10 17:25

jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

.text()

.text()는 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꿉니다. .html()과 비슷하지만 태그의 처리가 다릅니다.

문법 1

	
			1

			.text()

선택한 요소 안의 내용을 가져옵니다. 태그는 가져오지 않습니다. 예를 들어

	
			1

			var jb = $( 'h1' ).text();

는 h1 요소의 내용을 변수 jb에 저장합니다.

문법 2

	
			1

			.text( textString )

이전 내용을 지우고 새로운 내용을 넣습니다. 예를 들어

	
			1

			$( 'div' ).html( '<h1>Lorem</h1>' );

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

는 div 요소의 내용을 <h1>Lorem</h1>로 바꿉니다. HTML 태그는 텍스트로 처리합니다.

예제 1

div 요소 안의 내용을 가져와서 그 내용을 출력합니다. div 요소가 여러 개 있으면 모든 내용을 가져옵니다. HTML 태그는 제외한다는 것에 주의합니다.

	
			1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

			<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        var jbText = $( 'div' ).text();
        alert( jbText );
      } );
    </script>
  </head>
  <body>
    <div>
      <h1>Lorem ipsum dolor.</h1>
    </div>
    <div>
      <h1>Aenean nec mollis.</h1>
    </div>
  </body>
</html>

		

예제 2

div 요소 안의 내용을 지우고 새로운 내용을 넣습니다. div 요소가 여러 개 있으면 모든 요소에 적용됩니다. 삽입하는 내용에 있는 HTML 태그는 태그가 아니라 텍스트로 인식합니다.

	
			1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

			<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'div' ).text( '<p>Aenean nec mollis.</p>' );
      } );
    </script>
  </head>
  <body>
    <div>
      <h1>Lorem ipsum dolor.</h1>
    </div>
    <div>
      <h1>Phasellus lacinia tempus.</h1>
    </div>
  </body>
</html>

		

참고

jQuery / Method / .html()

jQuery

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.

이 게시물을

번호	제목	글쓴이	날짜	조회 수
34	[javascript] React - Apache에 배포하기	졸리운_곰	2026.01.25	444
33	Python으로 GraphQL 서버 구현	졸리운_곰	2019.12.17	541
32	처음 만나는 GraphQL	졸리운_곰	2019.12.17	373
31	웹팩(Webpack) 이란, 웹팩 간단 정리 및 리액트(React) 기본 개발환경 세팅. [2]	졸리운_곰	2019.11.08	581
30	웹팩(Webpack) 이란, 웹팩 간단 정리 및 리액트(React) 기본 개발환경 세팅. [1]	졸리운_곰	2019.11.08	411
29	PHP 로 css/js 보호하기	졸리운_곰	2019.11.08	439
28	Three.js를 이용한 WebGL: 기본	졸리운_곰	2019.11.08	495
27	underscore.js로 편해지자	졸리운_곰	2018.10.16	545
26	자바스크립트로 각종 값넘기는방법	졸리운_곰	2018.01.24	519
25	form 데이터 주고 받기	졸리운_곰	2018.01.24	489
24	Node.js & WebSocket — Simple chat tutorial	졸리운_곰	2017.12.08	614
23	JavaScript 모듈화 도구, webpack	졸리운_곰	2017.10.30	539
22	웹팩이란?	졸리운_곰	2017.10.30	532
21	이해하기 쉬운 Webpack 가이드	졸리운_곰	2017.10.30	855
20	[jquery] Ajax를 품은 jQuery	졸리운_곰	2017.04.25	466
19	Create Your First Mobile App with AngularJS and Ionic	졸리운_곰	2016.11.20	1270
18	Single Page Application using AngularJs Tutorial	졸리운_곰	2016.11.20	458
17	AngularJS Tutorial - Building a Web App in 5 minutes	졸리운_곰	2016.11.20	460
16	자바스크립트의 'this' 키워드 이해하기	졸리운_곰	2016.11.17	634
15	jQuery 핵심 - 노드 다루기	졸리운_곰	2016.11.17	777

첫 페이지 1 2 끝 페이지

쓰기

태그

JQuery jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

.text()

문법 1

문법 2

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

예제 1

예제 2

참고

관련 글

댓글 0

JQuery jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

jQuery / Method / .text() - 선택한 요소 안의 내용을 가져오거나, 다른 내용으로 바꾸는 메서드

.text()

문법 1

문법 2

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다. 어린이용이며, 설치가 필요없는 브라우저 게임입니다. https://s1004games.com

예제 1

예제 2

참고

관련 글

댓글 0

로그인

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com