JQuery text html method

JQuery text html method

■ JQuery에는 태그의 내용을 제어할 수 있는 몇 가지 메서드가 있는데요. 그것들 중 이번 글에서는 text와 html 메서드에 대해서 알아보려고 합니다. 이 두  메서드는 똑같이 태그의 내용을 읽어오거나, 내용을 변경해주는 역할을 하는데요. 차이점이 있다면 태그의 기능을 유지하느냐 그렇지 않으냐의 차이가 있습니다. text 메서드는 태그의 내용을 문자 그대로 읽어오고 태그의 기능을 유지하지 않습니다. 반면에 html 메서드는 태그의 기능을 유지하면서 읽어오는데요. 

■ 먼저 text() 메서드의 형식부터 알아보겠습니다.

var 변수 = $("선택자").text(); ◀ 문자열 읽어와서 변수에 저장

$("선택자").text(변경할 내용); ◀ 문자열 변경하기

 

 

이 형식을 생각하면서 예제를 만들어 보겠습니다.

■ 첫 번째 단락은 링크가 걸려있는데요. text() 메서드를 이용해서 내용을 읽어가고, 두 번째 단락에 첫 번째 단락을 그대로 넣어보겠습니다. js 파일을 다음과 같이 작성할게요.

■ 't1'이라는 변수에 '#aaa'의 문자열을 저장하고 있습니다. 그리고 '#bbb'에 역시 text(변경할 내용(t1))을 넣고 있는데요. 결과를 출력해보면 똑같은 문자열이 두 줄 나타나겠죠? 확인해보겠습니다.

■ 이렇게 같은 문자열이 출력되는데요. 차이점이 있죠? text()로 읽어와서 변경한 문자열은 태그(<a>)를 인식하지 못 합니다. <a>태그도 그대로 문자열로 인식을 해버리는 거예요. 

 다음은 html 메서드를 살펴보겠습니다. 이 메서드의 형식도 text()와 같습니다.

var 변수 = $("선택자").html(); ◀ 문자열 읽어와서 변수에 저장

$("선택자").html(변경할 내용); ◀ 문자열 변경하기

앞에서 언급했듯이 그럼 html() 메서드는 태그를 처리해주겠죠? 다음 예제를 보겠습니다.

■ 같은 내용인데요. html() 메서드를 사용했습니다.

■ 결과를 출력하면....태그 기능을 그대로 살리면서 읽어오고, 태그 기능을 유지하면서 그대로 출력하고 있습니다. 

 이렇게 해서 태그 내용을 제어할 수 있는 메서드 중에서  text와 html 메서드를 알아봤는데요. 두 메서드의 차이는 태그 기능을 살려주는지에 있습니다. 수고하셨어요.