제목만 보면 못알아들을 거 압니다. 제목학원 안다닌 덕분이죠.
예제를 통해 기존 하위 요소하면서 텍스트만 바꾸는 방법을 알려드리죠.
어쨌든 이렇게 마크업이 구성되어 있습니다.

<a id="mylink" href="#">
    <img src="http://fiddle.jshell.net/favicon.png"/>링크1
</a>

보시면 이미지 태그와 그냥 텍스트가 공존해 있습니다.
이 상태에서 $('#mylink').text('링크다'); 이렇게 실행하시면
이미지 태그가 없어지고 링크다 라는 텍스트가 들어가게 됩니다.
만약 저 이미지 태그를 유지하면서 텍스트만 바꾸고 싶다면,
깊숙히 들어가서 바꿀 수 있습니다. 조금 어려운 방법이죠.
먼저 $('#mylink').contents() 메서드를 사용합니다.
contents() 메서드는 children() 메서드와 비슷하지만,
텍스트 요소까지 모두 받아들이는 차이점을 가지고 있습니다.
이렇게 한 다음에 텍스트 요소만 필터링합니다. 이때부터 표준 속성인 nodeType를 이용하죠.

$('#mylink').contents().filter(function(){
    return this.nodeType == 3;
});

이렇게 하면 nodeType 가 3, 즉, 텍스트 요소만 필터링하게 되는 겁니다.
그런 다음에 지웁니다.

$('#mylink').contents().filter(function(){
    return this.nodeType == 3;
}).remove();

모든 텍스트 요소가 삭제됩니다.
이제 할 일이 끝났으니 되돌아 가면 되겠습니다. end() 메서드를 통하여 다시 이전 선택자로 돌아갑니다.

$('#mylink').contents().filter(function(){
    return this.nodeType == 3;
}).remove().end().end();

end() 한번 쓰면 contents() 로 뽑은 요소들이 선택되고, 또 end() 쓰면 $('#mylink') 선택자에 대한 작업을 준비하게 되겠습니다.
이런 다음에 텍스트를 포함시키면 끝.

$('#mylink').contents().filter(function(){
    return this.nodeType == 3;
}).remove().end().end().append('링크다');

어때요. 참 쉽죠?
만약 이미지 태그 앞에다 넣고 싶다면?

$('#mylink').contents().filter(function(){
    return this.nodeType == 3;
}).remove().end().end().prepend('링크다');

이렇게 하시면 되겠습니다.
빠르게 온라인 예제를 바고 싶다면 주저마시고 요기 링크를 클릭하세요.
그럼 이만!


그리고 보너스로 제이쿼리 없이 하는 방법도 있습니다. 의외로 간단하더군요.


var link=document.getElementById('mylink');
for(var i = 0,childs = link.childNodes; i < childs.length; i++){
    if(childs[i].nodeType == 3)
      link.removeChild(childs[i]);
}
link.appendChild(document.createTextNode('링크다'));

No. Subject Author Date Views
Notice SQL강좌: 챗GPT와 함께 배우는 SQL Server 무료 강좌 목차와 소개 (2023년 9월 업데이트) 코난(김대우) 2023.08.18 236319
Notice Python 무료 강좌 - 기초, 중급, 머신러닝(2023년 6월 업데이트) 코난(김대우) 2021.01.01 94157
56 jQuery MsgBox 0.2.6 BETA 출시! 컴포지트 2012.05.10 30601
55 jQuey plugin - 코드 샘플 Code Sample 한머리 2012.04.09 24281
» 기존 요소 유지하면서 텍스트만 바꾸기. 컴포지트 2012.02.16 31587
53 attr를 활용한 마우스따라 리스트색상 변하기... [2] 박규정 2012.02.08 31062
52 골때리는 자바스크립트 미니버전 [1] 컴포지트 2011.11.18 30208
51 jQuery Plugin - Plugin 작성 가이드 [2] 한머리 2011.11.16 47009
50 윈도우를 위한 node.js 초간단 구축 가이드 컴포지트 2011.11.08 43659
49 jQuery Plugin - JS OOP 2편, Self-Invocating function [3] 한머리 2011.10.14 32425
48 jQuery Plugin - JS OOP 1편 [1] 한머리 2011.10.11 24530
47 jQuery plugin - 들어가기 전에 [7] 한머리 2011.10.07 32155
46 jQuery Plugin Example - 자진삭제 [5] 한머리 2011.10.07 24367
45 ajax 페이지에서 live, delegate의 오남용!! [2] 싸우라비 2011.09.20 23045
44 컴포지트가 추천하는 조낸 빠른 자바스크립트 CDN 활용 컴포지트 2011.08.31 26610
43 IE 감지 스크립트 [1] 컴포지트 2011.07.26 18665
42 [jQuery 동영상 강좌] 20. jQuery Performance [3] 승연아빠 2011.07.10 36754
41 [jQuery 동영상 강좌] 19. jQuery Event - 이벤트에 생명을~ 승연아빠 2011.07.10 34646
40 [jQuery 동영상 강좌] 18. jQuery Event - bind() 메서드 승연아빠 2011.07.10 26502
39 [jQuery 동영상 강좌] 17. jQuery Event - 이벤트 지원 메서드 승연아빠 2011.07.10 31499
38 [jQuery 동영상 강좌] 16. jQuery Form API - 폼 지원 메서드에 대하여 승연아빠 2011.07.10 30521
37 [jQuery 동영상 강좌] 15. jQuery Attribute - 요소의 속성 관련 메서드에 대하여 승연아빠 2011.07.10 21898





XE Login