Jquery text만 변경 - jquery textman byeongyeong

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

jQuery를 사용하여 텍스트 변경하는 방법

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

$(selector).text(content)

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

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

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

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

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

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

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

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

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

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

자바스크립트/jQuery 템플릿:

시간을 절약하고 싶은 경우 워드프레스 플러그인, jQuery 템플릿 등을 판매하는 CodeCanyon에서 비교적 저렴한 비용에 자바스크립트/jQuery 템플릿, PHP 스크립트 등의 코드 스크립트를 구입할 수 있습니다.

참고:

• CSS를 사용하여 텍스트 바꾸기
• jQuery를 사용하여 링크 URL 변경하기
• jQuery - Set Content and Attributes(컨텐츠/속성 설정하기) - w3schools