element 변화, jQuery, tip, 변화 없이, 부모, 자식, 텍스트, 텍스트 변경
<div class="parent"> First <div class="child">Child</div> Last </div>
다음과 같을 때 First 를 Second로 바꾸고 싶을 때 어떻게 하면 될까?!
$(".parent").contents()를 하면 다음과 같이 나온다.
["First", <div class="child">Child</div>, "Last"]$(".parent").contents()[0].textContent = "Second"하면 First 값이 Second로 바뀐다.
'김초보's JQuery 이야기 > TIP' 카테고리의 다른 글
2016.08.26 |
2016.05.19 |
2016.05.02 |
2016.03.02 |
NAME
PASSWORD
HOMEPAGE
SECRET
<div class="parent"> First <div class="child">Child</div> Last </div>
다음과 같을 때 First 를 Second로 바꾸고 싶을 때 어떻게 하면 될까?!
$(".parent").contents()를 하면 다음과 같이 나온다.
["First", <div class="child">Child</div>, "Last"]
$(".parent").contents()[0].textContent = "Second"하면 First 값이 Second로 바뀐다.
Home » jQuery 예제 » jQuery를 사용하여 텍스트 변경하기
Last Updated: 2022년 9월 15일 | 댓글 남기기
이 글에서는 CSS를 사용하여 텍스트를 다른 문구로 바꾸는 방법을 살펴보았습니다. CSS 대신 jQuery를 사용하면 보다 수월하게 텍스트를 원하는 대로 바꿀 수 있습니다. 다음과 같은 스크립트를 사용하면 해당 선택자의 텍스트 컨텐츠를 설정하게 됩니다. 예를 들어, 다음과 같은 스크립트를 사용하면: 버튼을 클릭하면 p 태그 내의 텍스트가 "안녕하세요!"로 바뀌게 됩니다(데모).jQuery를 사용하여 텍스트 변경하는 방법
또 다른 예로 다음과 같은 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", "//www.w3schools.com/jquery"); }); // Reference: w3schools여기에서 실제 작동을 살펴볼 수 있습니다.
자바스크립트/jQuery 템플릿:
시간을 절약하고 싶은 경우 워드프레스 플러그인, jQuery 템플릿 등을 판매하는 CodeCanyon에서 비교적 저렴한 비용에 자바스크립트/jQuery 템플릿, PHP 스크립트 등의 코드 스크립트를 구입할 수 있습니다.
참고:
- CSS를 사용하여 텍스트 바꾸기
- jQuery를 사용하여 링크 URL 변경하기
- jQuery - Set Content and Attributes(컨텐츠/속성 설정하기) - w3schools
특정 요소에 있는 텍스트 값을 변경하려고 한다. 만약 그 안에 텍스트 뿐만 아니라 어떤 태그도 담겨 있다면? 제이쿼리(jQuery)를 사용해 text() 또는 html()을 사용하면 간단하게 텍스트를 수정할 수 있으나 그 하위 자식 요소들도 함께 지워지기 때문에 이 방법이 아닌 다른 방법이 필요하다. 이때 어떻게 하면 할 수 있을까?
간단할 것 같으면서 막상 생각해보면 잘 떠오르지 않는다. 이 경우 간단하게 생각할 수 있는 방법이 바로 clone() 함수를 이용하여 해결하는 방법이다. 만약 태그가 아래와 같다면...
<div>Click
<span class="icon rightArrow">></span>
</div>
클릭할 수 있는 버튼 형태의 span 태그로 안에 > 모양의 아이콘 태그가 있음
이를 해결하는 플로우는 다음과 같다.
1. div 태그의 자식 요소를 선택하여 복사해둔다. Clone() 을 사용
<script type="text/javascript">
var $cloneEle = $('div').children();
</script>
2. div 태그의 택스트를 원하는 문구로 바꾼다. 예를 들어 No Click으로 바꾼다면
<script type="text/javascript">
$('div').text('No Click');
</script>
3. 복사한 자식 태그를 div에 추가한다.
<script type="text/javascript">
$('div').append($cloneEle);
</script>
Clone() 함수를 사용해 간단하게 해결되었다!!