[JQUERY] jQuery를 사용하면 HTML 태그를 변경하려면?

jQuery를 사용하면 HTML 태그를 변경하려면?

해결법

1. ---

   1.는 DOM 요소가 만들어지면, 태그는 불변이다, 나는 생각합니다. 당신이 뭔가를해야 할 것입니다 :

   는 DOM 요소가 만들어지면, 태그는 불변이다, 나는 생각합니다. 당신이 뭔가를해야 할 것입니다 :

   $(this).replaceWith($('<h5>' + this.innerHTML + '</h5>'));
   

2. ---

   2.여기에 여러 가지 많은 요소로, 모든 그것을 할 것입니다 확장입니다 ...

   여기에 여러 가지 많은 요소로, 모든 그것을 할 것입니다 확장입니다 ...

   사용 예제 :

   또는

   또는

   플러그인 출처 :

   $.extend({
       replaceTag: function (currentElem, newTagObj, keepProps) {
           var $currentElem = $(currentElem);
           var i, $newTag = $(newTagObj).clone();
           if (keepProps) {//{{{
               newTag = $newTag[0];
               newTag.className = currentElem.className;
               $.extend(newTag.classList, currentElem.classList);
               $.extend(newTag.attributes, currentElem.attributes);
           }//}}}
           $currentElem.wrapAll($newTag);
           $currentElem.contents().unwrap();
           // return node; (Error spotted by Frank van Luijn)
           return this; // Suggested by ColeLawrence
       }
   });
   
   $.fn.extend({
       replaceTag: function (newTagObj, keepProps) {
           // "return" suggested by ColeLawrence
           return this.each(function() {
               jQuery.replaceTag(this, newTagObj, keepProps);
           });
       }
   });
   

3. ---

   3.오히려 변화보다 태그의 유형, 당신은 태그의 스타일을 변경해야합니다 (또는 오히려, 특정 ID를 사용하여 태그.) 그것의 안 좋은 연습은 문서의 요소 문체 변경 사항을 적용하기 위해 변경 될 수 있습니다. 이 시도:

   오히려 변화보다 태그의 유형, 당신은 태그의 스타일을 변경해야합니다 (또는 오히려, 특정 ID를 사용하여 태그.) 그것의 안 좋은 연습은 문서의 요소 문체 변경 사항을 적용하기 위해 변경 될 수 있습니다. 이 시도:

   $('a.change').click(function() {
       $('p#changed').css("font-weight", "bold");
   });
   
   <p id="changed">Hello!</p>
   <a id="change">change</a>
   

4. ---

   4.나는 수정의 몇 가지를 만들어 내가 다시 여기에 게시 거라고 생각 때문에 첫 번째 대답은, 내가 필요 꽤 것이었다 것으로 나타났습니다.

   나는 수정의 몇 가지를 만들어 내가 다시 여기에 게시 거라고 생각 때문에 첫 번째 대답은, 내가 필요 꽤 것이었다 것으로 나타났습니다.

   인수 :

   보고:

   좋아, 여기에 몇 가지 답변을 지금이 알고,하지만 난 다시 쓰기 위해 자신에 그것을했다.

   여기에서 우리는 우리가 복제 사용하는 것과 동일한 방법으로 태그를 교체 할 수 있습니다. 우리가 사용 된 경우 자식 노드의 데이터 및 이벤트를 복사 withDataAndEvents와 deepWithDataAndEvents와 동일한 구문을 .clone ()를 따르고 있습니다.

   $tableRow.find("td").each(function() {
     $(this).clone().replaceTag("li").appendTo("ul#table-row-as-list");
   });
   

   $.extend({
       replaceTag: function (element, tagName, withDataAndEvents, deepWithDataAndEvents) {
           var newTag = $("<" + tagName + ">")[0];
           // From [Stackoverflow: Copy all Attributes](http://stackoverflow.com/a/6753486/2096729)
           $.each(element.attributes, function() {
               newTag.setAttribute(this.name, this.value);
           });
           $(element).children().clone(withDataAndEvents, deepWithDataAndEvents).appendTo(newTag);
           return newTag;
       }
   })
   $.fn.extend({
       replaceTag: function (tagName, withDataAndEvents, deepWithDataAndEvents) {
           // Use map to reconstruct the selector with newly created elements
           return this.map(function() {
               return jQuery.replaceTag(this, tagName, withDataAndEvents, deepWithDataAndEvents);
           })
       }
   })
   

5. ---

   5.아이디어 요소를 포장 및 내용 랩을 해제하는 것입니다 :

   아이디어 요소를 포장 및 내용 랩을 해제하는 것입니다 :

   function renameElement($element,newElement){
   
       $element.wrap("<"+newElement+">");
       $newElement = $element.parent();
   
       //Copying Attributes
       $.each($element.prop('attributes'), function() {
           $newElement.attr(this.name,this.value);
       });
   
       $element.contents().unwrap();       
   
       return $newElement;
   }
   

   샘플 사용 :

   renameElement($('p'),'h5');
   

   데모

6. ---

   6.나는 당신이 당신의 jQuery 객체의 문자열 표현을 사용하고 정규 표현식과 기본 자바 스크립트를 사용하여 태그 이름을 대체 접근 함께했다. 당신은 어떤 내용을 풀어되지 않으며 각 속성 / 프로퍼티를 반복 할 필요가 없습니다.

   나는 당신이 당신의 jQuery 객체의 문자열 표현을 사용하고 정규 표현식과 기본 자바 스크립트를 사용하여 태그 이름을 대체 접근 함께했다. 당신은 어떤 내용을 풀어되지 않으며 각 속성 / 프로퍼티를 반복 할 필요가 없습니다.

   /*
    * replaceTag
    * @return {$object} a new object with replaced opening and closing tag
    */
   function replaceTag($element, newTagName) {
   
     // Identify opening and closing tag
     var oldTagName = $element[0].nodeName,
       elementString = $element[0].outerHTML,
       openingRegex = new RegExp("^(<" + oldTagName + " )", "i"),
       openingTag = elementString.match(openingRegex),
       closingRegex = new RegExp("(<\/" + oldTagName + ">)$", "i"),
       closingTag = elementString.match(closingRegex);
   
     if (openingTag && closingTag && newTagName) {
       // Remove opening tag
       elementString = elementString.slice(openingTag[0].length);
       // Remove closing tag
       elementString = elementString.slice(0, -(closingTag[0].length));
       // Add new tags
       elementString = "<" + newTagName + " " + elementString + "</" + newTagName + ">";
     }
   
     return $(elementString);
   }
   

   다음과 같이 마지막으로, 기존 개체 / 노드를 대체 할 수있다 :

   var $newElement = replaceTag($rankingSubmit, 'a');
   $('#not-an-a-element').replaceWith($newElement);
   

7. ---

   7.이것은 내 솔루션입니다. 이 태그 사이를 전환 할 수 있습니다.

   이것은 내 솔루션입니다. 이 태그 사이를 전환 할 수 있습니다.