comment faire pour modifier un type d'élément à l'aide de jquery

Voici un moyen que vous pourriez le faire avec jQuery:

var attrs = { };

$.each($("b")[0].attributes, function(idx, attr) {
    attrs[attr.nodeName] = attr.nodeValue;
});


$("b").replaceWith(function () {
    return $("<h1 />", attrs).append($(this).contents());
});

Exemple: http://jsfiddle.net/yapHk/

Mise à jour, voici un plugin:

(function($) {
    $.fn.changeElementType = function(newType) {
        var attrs = {};

        $.each(this[0].attributes, function(idx, attr) {
            attrs[attr.nodeName] = attr.nodeValue;
        });

        this.replaceWith(function() {
            return $("<" + newType + "/>", attrs).append($(this).contents());
        });
    };
})(jQuery);

Exemple: http://jsfiddle.net/mmNNJ/

@jakov et @Andrew Whitaker

Voici une poursuite de l'amélioration de sorte qu'il peut gérer plusieurs éléments à la fois.

$.fn.changeElementType = function(newType) {
    var newElements = [];

    $(this).each(function() {
        var attrs = {};

        $.each(this.attributes, function(idx, attr) {
            attrs[attr.nodeName] = attr.nodeValue;
        });

        var newElement = $("<" + newType + "/>", attrs).append($(this).contents());

        $(this).replaceWith(newElement);

        newElements.push(newElement);
    });

    return $(newElements);
};

Seule façon que je peux penser à est de tout copier à la main: exemple jsfiddle

HTML

<b class="xyzxterms" style="cursor: default; ">bryant keil bio</b>

Jquery/Javascript

$(document).ready(function() {
    var me = $("b");
    var newMe = $("<h1>");
    for(var i=0; i<me[0].attributes.length; i++) {
        var myAttr = me[0].attributes[i].nodeName;
        var myAttrVal = me[0].attributes[i].nodeValue;
        newMe.attr(myAttr, myAttrVal);
    }
    newMe.html(me.html());
    me.replaceWith(newMe);
});

J'aime l'idée de @AndrewWhitaker et autres, d'utiliser un plugin jQuery -- ajout de la changeElementType() méthode. Mais un plugin est comme une blackbox, pas de mater sur le code, si il est petit et fonctionne très bien... Donc, la performance est nécessaire, et il est plus important que le code.

"Javascript" ont de meilleures performances que jQuery: je pense que @FelixKling du code ont de meilleures performances que @AndrewWhitaker et d'autres.

---

Ici un "pur Javavascript" (et "pure DOM") du code, encapsulé dans un plugin jQuery:

 (function($) {  //@FelixKling's code
    $.fn.changeElementType = function(newType) {
      for (var k=0;k<this.length; k++) {
       var e = this[k];
       var new_element = document.createElement(newType),
        old_attributes = e.attributes,
        new_attributes = new_element.attributes,
        child = e.firstChild;
       for(var i = 0, len = old_attributes.length; i < len; i++) {
        new_attributes.setNamedItem(old_attributes.item(i).cloneNode());
       }
       do {
        new_element.appendChild(e.firstChild);
       }
       while(e.firstChild);
       e.parentNode.replaceChild(new_element, e);
      }
      return this; //for chain... $(this)?  not working with multiple 
    }
 })(jQuery);

Avec jQuery sans itération sur les attributs:

La replaceElem méthode ci-dessous accepte old Tag, new Tag et context et exécute le remplacement avec succès:

---

JS:

replaceElem('h2', 'h1', '#test');

function replaceElem(oldElem, newElem, ctx) {
  oldElems = $(oldElem, ctx);
  //
  $.each(oldElems, function(idx, el) {
    var outerHTML, newOuterHTML, regexOpeningTag, regexClosingTag, tagName;
    //create RegExp dynamically for opening and closing tags
    tagName = $(el).get(0).tagName;
    regexOpeningTag = new RegExp('^<' + tagName, 'i'); 
    regexClosingTag = new RegExp(tagName + '>$', 'i');
    //fetch the outer elem with vanilla JS,
    outerHTML = el.outerHTML;
    //start replacing opening tag
    newOuterHTML = outerHTML.replace(regexOpeningTag, '<' + newElem);
    //continue replacing closing tag
    newOuterHTML = newOuterHTML.replace(regexClosingTag, newElem + '>');
    //replace the old elem with the new elem-string
    $(el).replaceWith(newOuterHTML);
  });

}

CSS:

h1 {
  color: white;
  background-color: blue;
  position: relative;
}

h1:before {
  content: 'this is h1';
  position: absolute;
  top: 0;
  left: 50%;
  font-size: 5px;
  background-color: black;
  color: yellow;
}

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="test">
  <h2>Foo</h2>
  <h2>Bar</h2>
</div>

Bonne Chance...

Voici ma version. C'est essentiellement @fiskhandlarn, mais plutôt que de construire un nouvel objet jQuery, il remplace simplement les éléments anciens avec le nouvellement créés, donc pas de fusion est nécessaire.

Démonstration: http://jsfiddle.net/0qa7wL1b/

$.fn.changeElementType = function( newType ){
  var $this = this;

  this.each( function( index ){

    var atts = {};
    $.each( this.attributes, function(){
      atts[ this.name ] = this.value;
    });

    var $old = $(this);
    var $new = $('<'+ newType +'/>', atts ).append( $old.contents() );
    $old.replaceWith( $new );

    $this[ index ] = $new[0];
  });

  return this;
};