1. text()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#btn1").click(function() {
        console.log("console> btn1");
        
        $("#test1").text("Hello World!");
    });
    
    $("#btn2").click(function() {
        console.log("console> btn2");
        
        $("#test2").text("<b>Hello world!</b>");
    });
});
</script>
 
</head>
<body>
 
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
 
<button id="btn1">Set text</button>
<button id="btn2">Set html</button>
 
</body>
</html>
 cs

 

text()는 안에 포함되어 있는 태그를 일반 텍스트로 인식한다(태그가 적용되지 않음)

 

 

2. html()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $("#btn1").click(function() {
        console.log("console> btn1");
        
        $("#test1").html("Hello World!");
    });
    
    $("#btn2").click(function() {
        console.log("console> btn2");
        
        $("#test2").html("<b>Hello world!</b>");
    });
});
</script>
 
</head>
<body>
 
<p id="test1">This is a paragraph.</p>
<p id="test2">This is another paragraph.</p>
 
<button id="btn1">Set text</button>
<button id="btn2">Set html</button>
 
</body>
</html>
 cs

 

 

html() 은 안에 있는 태그를 태그로 인식하여 적용시켜 준다(태그가 적용됨)

 

 

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

'FrontEnd > JavaScript & jQuery' 카테고리의 다른 글

jQuery:: 제이쿼리를 이용한 테이블 동적 rowspan / colspan  (0) 2017.08.01
Jquery :: document.ready() vs window.load() 차이  (1) 2016.10.04
JavaScript :: 배열 정렬하기(문자열 배열, 숫자 배열)  (0) 2016.10.03
JavaScript :: 정규 표현식  (0) 2016.08.21
JavaScript :: return vs return true vs return false 차이  (0) 2016.07.14

+ Recent posts

티스토리툴바