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

