제이쿼리 팁! 기존 요소 유지하면서 텍스트만 바꾸기.

제목만 보면 못알아들을 거 압니다. 제목학원 안다닌 덕분이죠.

예제를 통해 기존 하위 요소하면서 텍스트만 바꾸는 방법을 알려드리죠.

어쨌든 이렇게 마크업이 구성되어 있습니다.

<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(‘링크다’);

이렇게 하시면 되겠습니다.

빠르게 온라인 예제를 바고 싶다면 주저마시고 링크 #1 을 클릭하세요.

그럼 이만!

보너스! 제이쿼리 없이 하고싶다면 아래 스크립트를 참고하시길.

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(‘링크다’));

의외로 쉽네..

composite / 2012년 11월 13일 / 미분류
태그:, , , , , , ,

답글 남기기

Your email address will not be published / Required fields are marked *