jQuery를 사용하여 텍스트 변경하기

이 글에서는 CSS를 사용하여 텍스트를 다른 문구로 바꾸는 방법을 살펴보았습니다. CSS 대신 jQuery를 사용하면 보다 수월하게 텍스트를 원하는 대로 바꿀 수 있습니다.

다음과 같은 스크립트를 사용하면 해당 선택자의 텍스트 컨텐츠를 설정하게 됩니다.

$(selector).text(content)

예를 들어, 다음과 같은 스크립트를 사용하면:

$(document).ready(function(){
$("button").click(function(){
$("p").text("안녕하세요!");
});
});

버튼을 클릭하면 p 태그 내의 텍스트가 “안녕하세요!”로 바뀌게 됩니다(데모).

또 다른 예로 다음과 같은 HTML이 있을 경우:

<h1 id="toptitle">프로필</h1>

가령, 제목이 여러 개 있을 경우 제목이 “프로필”일 경우에만 다른 문구(예: “테스트”)로 바꾸기를 원한다면 다음과 같은 스크립트를 사용할 수 있습니다.

$(document).ready(function() {
$('#toptitle').text(function(i, oldText) {
return oldText === '프로필' ? '테스트' : oldText;
});
});

또는 다음과 같은 스크립트도 가능합니다.

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

var text = $('#toptitle').text();
if (text == '프로필'){
$('#toptitle').text('테스트');
}

혹은 :contains() 선택자를 사용할 수 있습니다.

$('#toptitle:contains("프로필")').text("테스트");

다음과 같이 HTML을 사용하는 것도 가능합니다.

$("#btn2").click(function(){
$("#test2").html("<b>안녕하세요!</b>");
});

속성을 변경하려면 attr() 메소드를 사용합니다.

$("button").click(function(){
$("#w3s").attr("href", "http://www.w3schools.com/jquery");
});
// Reference: w3schools

여기에서 실제 작동을 살펴볼 수 있습니다.

[출처] https://www.thewordcracker.com/jquery-examples/change-content-using-jquery/