jQuery : comment changer le nom d'une balise ?

Question

JQuery : comment changer le nom d'une balise ?

Par exemple :

<tr>
    $1
</tr>

J'ai besoin

<div>
    $1
</div>

Oui, je peux

1. Créer l'élément DOM <div>
2. Copier le contenu de tr dans div
3. Retirer tr du dom

Mais puis-je le faire directement ?

PS :

    $(tr).get(0).tagName = "div"; 

résulte en DOMException .

Answer 1

Vous pouvez remplacer n'importe quelle balise HTML en utilisant l'outil jQuery .replaceWith() método.

exemple : http://jsfiddle.net/JHmaV/

Réf. : . replaceWith

Si vous voulez conserver le balisage existant, vous pouvez utiliser un code comme celui-ci :

$('#target').replaceWith('<newTag>' + $('#target').html() +'</newTag>')

Answer 2

Non, ce n'est pas possible selon la spécification du W3C : "nom de balise de type DOMString, en lecture seule".

http://www.w3.org/TR/DOM-Level-2-Core/core.html

Answer 3

Où se trouve la méthode DOM renameNode() ?

Aujourd'hui (2014), aucun navigateur ne comprend le nouvelle méthode DOM3 renameNode (voir également W3C ) vérifiez si elle fonctionne sur votre bowser : http://jsfiddle.net/k2jSm/1/

Donc, une solution DOM est laid et je ne comprends pas pourquoi ( ??) jQuery n'a pas mis en place une solution de contournement ?

algorithme DOM pur

1. createElement(new_name)
2. copier tout le contenu dans le nouvel élément ;
3. remplacer l'ancien par le nouveau en replaceChild()

est quelque chose comme ça,

function rename_element(node,name) {
    var renamed = document.createElement(name); 
    foreach (node.attributes as a) {
        renamed.setAttribute(a.nodeName, a.nodeValue);
    }
    while (node.firstChild) {
        renamed.appendChild(node.firstChild);
    }
    return node.parentNode.replaceChild(renamed, node);
}

... attendre la révision et jsfiddle ...

Algorithme jQuery

L'algorithme de @ilpoldo est un bon point de départ,

   $from.replaceWith($('<'+newname+'/>').html($from.html()));

Comme d'autres l'ont dit, il faut une copie d'attribut... attendez le générique...

spécifique pour class , préserver l'attribut voir http://jsfiddle.net/cDgpS/

Voir aussi https://stackoverflow.com/a/9468280/287948

Answer 4

Pour préserver le contenu interne de la balise, vous pouvez utiliser l'accesseur .html() en collaboration avec .replaceWith()

exemple de fourche : http://jsfiddle.net/WVb2Q/1/

Answer 5

Pour remplacer le contenu interne de multiple chacun avec son propre contenu original, vous devez utiliser .replaceWith() y .html() différemment :

http://jsfiddle.net/kcrca/VYxxG/