[Jquery] 제이쿼리 텍스트 변경 .text() .html() (예제포함)
2020. 2. 19. 02:00
안녕하세요.
오늘은 제이쿼리(Jquery) text(), html() 이벤트에 대해서 알아보겠습니다. 저희가 웹 개발을 하면서 상당히 자주 쓰이게 되는 이벤트 입니다.
- text()란?
text()이벤트란 $(셀렉터).text() 셀렉터의 문자를 변경 해주는 것입니다. text()는 태그는 반영되지 않고 문자열로 표시가 됩니다.
- text() 소스 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<html>
<head>
<script>
// 버튼 클릭 함수
$("#testClick").click(function(){
// 'testText'라는 id의 텍스트를 '안녕하세요 김철수 입니다.'라고 변경.
$("#testText").text("안녕하세요 김철수 입니다.");
});
</script>
</head>
<body>
<input id="testClick" type="button">
<h2 id="testText">안녕하세요. 홍길동입니다.</h2>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
-html()란?
html() 이벤트는 text()이벤트와 비슷하지만 문자열만이 아닌 문자열 안에 태그도 같이 넣을수 있습니다.
- html() 소스 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
<html>
<head>
<script>
// 버튼 클릭 함수
$("#testClick").click(function(){
// 'testHtml'라는 id의 텍스트를 '안녕하세요
// 김철수 입니다.'라고 변경.
// 설명 : </br>태그로인해 문자가 엔터처리 됩니다.
$("#testHtml").text("안녕하세요 </br> 김철수 입니다.");
});
</script>
</head>
<body>
<input id="testClick" type="button">
<h2 id="testHtml">안녕하세요. 홍길동입니다.</h2>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
- 글을 마치며
오늘은 text(), html() 이벤트에 대해서 알아봤습니다. 간단하면서도 개발을 하면서 유용하게 많이 쓰이는 이벤트 입니다. 짧은 글이지만 모든분들에게 유용하였으면 좋겠습니다.
- 추천글
[JavaScript] - [Jquery] 제이쿼리 Ajax 설명 사용법 및 예제(간단)
[JavaScript] - 자바스크립트(JavaScript)란 무엇이며 특징 및 장단점(기초)
[JavaScript] - [Jquery] 제이쿼리 null 체크 함수 예제(간단)
'JavaScript' 카테고리의 다른 글
| [Javascript] 자바스크립트 onchange() 사용법 & 예제 (데이터 가져오기 포함) (0) | 2020.02.26 |
|---|---|
| [Jquery] 제이쿼리 텍스트(문자열) 변경 실시간 감지방법 설명(간단) (0) | 2020.02.19 |
| [Jquery] 제이쿼리 Ajax 설명 사용법 및 예제(간단) (1) | 2020.02.14 |
| [Javascript/Jquery] 자바스크립트 onclick 이벤트 리스너 설명 및 소스(초간단) (0) | 2020.02.13 |
| 자바스크립트(JavaScript)란 무엇이며 특징 및 장단점(기초) (0) | 2020.02.12 |
이 글을 공유합시다
