[JQUERY] jQuery를 사용하면 다른 하나 개의 태그를 대체하는

jQuery를 사용하면 다른 하나 개의 태그를 대체하는

해결법

1. ---

   1.당신은 .replaceWith [문서]에 기능을 전달할 수 있습니다 :

   당신은 .replaceWith [문서]에 기능을 전달할 수 있습니다 :

   $('code').replaceWith(function(){
       return $("<pre />", {html: $(this).html()});
   });
   

   함수 내부에는,이 현재 처리 코드 요소를 지칭한다.

   데모

   업데이트 :이 더 큰 성능 차이가 없지만, 경우에 코드 요소가 그들을 더 정확한 것으로 느낀다 직렬화하는 대신 자녀를 추가, 다른 HTML의 자녀가 :

   $('code').replaceWith(function(){
       return $("<pre />").append($(this).contents());
   });
   

2. ---

   2.이 훨씬 좋네요 :

   이 훨씬 좋네요 :

   $('code').contents().unwrap().wrap('<pre/>');
   

   비록 틀림없이 펠릭스 클링의 솔루션은 배 빠른 약 :

3. ---

   3.그것은 당신이 항상 첫 번째 코드의 내용을 얻을거야 맞습니다 $ ( '코드') 때문이다. HTML을 () 당신이 그것을 사용할 때마다 항상 첫 번째 요소를 참조합니다.

   그것은 당신이 항상 첫 번째 코드의 내용을 얻을거야 맞습니다 $ ( '코드') 때문이다. HTML을 () 당신이 그것을 사용할 때마다 항상 첫 번째 요소를 참조합니다.

   대신, 모든 요소를 ​​반복 .each 사용할 수 있습니다 개별적으로 각각 변경 :

   $('code').each(function() {
       $(this).replaceWith( "<pre>" + $(this).html() + "</pre>" );
       // this function is executed for all 'code' elements, and
       // 'this' refers to one element from the set of all 'code'
       // elements each time it is called.
   });
   

4. ---

   4.이 시도:

   이 시도:

   $('code').each(function(){
   
       $(this).replaceWith( "<pre>" + $(this).html() + "</pre>" );
   
   });
   

   http://jsfiddle.net/mTGhV/

5. ---

   5.이것은 어떤가요?

   이것은 어떤가요?

   $('code').each(function () {
       $(this).replaceWith( "<pre>" + $(this).html() + "</pre>" );
   });
   

6. ---

   6.펠릭스의 대답에 구축.

   펠릭스의 대답에 구축.

   $('code').replaceWith(function() {
       var replacement = $('<pre>').html($(this).html());
       for (var i = 0; i < this.attributes.length; i++) {
           replacement.attr(this.attributes[i].name, this.attributes[i].value);
       }
       return replacement;
   });
   

   이것은 대체 사전 태그의 코드 태그의 속성을 재현합니다.

   편집 : 이것은 다른 코드 태그의 innerHTML 내부에도 그 코드 태그를 대체합니다.

   function replace(thisWith, that) {
       $(thisWith).replaceWith(function() {
           var replacement = $('<' + that + '>').html($(this).html());
           for (var i = 0; i < this.attributes.length; i++) {
               replacement.attr(this.attributes[i].name, this.attributes[i].value);
           }
           return replacement;
       });
       if ($(thisWith).length>0) {
           replace(thisWith, that);
       }
   }
   
   replace('code','pre');
   

7. ---

   7.jQuery를 1.4.2로 :

   jQuery를 1.4.2로 :

   $('code').replaceWith(function(i,html) {
     return $('<pre />').html(html);
   });​
   

   그런 다음 새로운 요소를 선택할 수 있습니다 :

   $('pre').css('color','red');
   

   출처 : http://api.jquery.com/replaceWith/#comment-45493689

   jsFiddle : http://jsfiddle.net/k2swf/16/

8. ---

   8.당신은 바닐라 자바 ​​스크립트를 사용한다면 당신은 것 :

   당신은 바닐라 자바 ​​스크립트를 사용한다면 당신은 것 :

   여기서이 프로세스의 jQuery 등가이다 :

   $("code").each(function () {
       $("<pre></pre>").append(this.childNodes).insertBefore(this);
       $(this).remove();
   });
   

   여기에 jsperf URL은 다음과 같습니다 http://jsperf.com/substituting-one-tag-for-another-with-jquery/7

   PS : 사용 들이게된다 () 또는 .innerHTML이 파괴 것을 모든 솔루션을 제공합니다.

9. ---

   9.또 다른 짧은 및 쉬운 방법 :

   또 다른 짧은 및 쉬운 방법 :

   $('code').wrapInner('<pre />').contents();
   

10. ---

    10.

    $('code').each(function(){
        $(this).replaceWith( "<pre>" + $(this).html()  + "</pre>" );
        });
    

    가장 깨끗한 방법입니다.

11. ---

    11.당신은 jQuery의 HTML 기능을 사용할 수 있습니다. 아래는 코드의 모든 속성을 유지하면서이 사전 태그로 코드 태그를 대체하는 샘플입니다.

    당신은 jQuery의 HTML 기능을 사용할 수 있습니다. 아래는 코드의 모든 속성을 유지하면서이 사전 태그로 코드 태그를 대체하는 샘플입니다.

        $('code').each(function() {
            var temp=$(this).html();
            temp=temp.replace("code","pre");
            $(this).html(temp);
        });
    

    이는 이전 태그의 모든 속성을 유지하면서 교환 할 필요가 HTML 요소 태그 세트로 작업 할 수 있습니다.

12. ---

    12.또한 속성을 유지, jQuery 플러그인을했다.

    또한 속성을 유지, jQuery 플러그인을했다.

    $.fn.renameTag = function(replaceWithTag){
      this.each(function(){
            var outerHtml = this.outerHTML;
            var tagName = $(this).prop("tagName");
            var regexStart = new RegExp("^<"+tagName,"i");
            var regexEnd = new RegExp("</"+tagName+">$","i")
            outerHtml = outerHtml.replace(regexStart,"<"+replaceWithTag)
            outerHtml = outerHtml.replace(regexEnd,"</"+replaceWithTag+">");
            $(this).replaceWith(outerHtml);
        });
        return this;
    }
    

    용법:

    $('code').renameTag('pre')
    

13. ---

    13.태그의 속성이없는 것을 (질문의 예에서 알 수 있듯이) 여기에 주어진 모든 해답은 가정합니다. 허용 대답이에서 실행하는 경우 :

    태그의 속성이없는 것을 (질문의 예에서 알 수 있듯이) 여기에 주어진 모든 해답은 가정합니다. 허용 대답이에서 실행하는 경우 :

    <code class='cls'>A</code>
    

    로 대체 될 경우

    <pre>A</pre>
    

    당신이뿐만 아니라 속성을 유지하려는 경우 - 어떤 무슨 일이 태그는 의미 대체 ...? 이 솔루션입니다 :

    $("code").each( function(){
        var content = $( "<pre>" );
    
        $.each( this.attributes, function(){ 
             content.attr( this.name, this.value );
        } );
    
        $( this ).replaceWith( content );
    } );
    

from https://stackoverflow.com/questions/7093417/using-jquery-to-replace-one-tag-with-another by cc-by-sa and MIT license