Utiliser jQuery pour modifier une balise HTML ?

Question

Est-ce possible ?

exemple :

Donc en cliquant sur le point d’ancrage du changement devrait causer la section de changer (par exemple) un h5 tag donc vous finiriez avec après le clic. Je sais que vous pouvez supprimer la balise p et remplacez-le par un h5, mais est de toute façon de réellement modifier une balise HTML ?

Answer 1

Une fois qu’un élément dom est créé, la balise est immuable, je crois. Vous auriez à faire quelque chose comme ceci :

Answer 2

Voici une extension qui va faire tout cela, le plus grand nombre d’éléments dans autant de façons...

Exemple d’utilisation :

Mise à jour : Nouvelle version (beaucoup mieux - j’ai appris comment écrire des plugins jQuery).

Ancienne extension JQuery (juste au cas où celui-ci est cassé ou somesuch) :

Answer 3

Plutôt que de changer le type de balise, vous devriez être changer le style de la balise (ou plutôt, avec un id spécifique.) Ce n’est pas une bonne pratique pour changer les éléments de votre document pour appliquer les modifications stylistiques. Essayez ceci :

Answer 4

J'ai remarqué que la première réponse n'était pas tout à fait ce dont j'avais besoin, j'ai donc fait quelques modifications et pensé que j'avais le poster ici.

Amélioration de la replaceTag(<tagName>)

replaceTag(<tagName>, [withDataAndEvents], [withDataAndEvents])

Arguments:

• tag: String
  • Le nom de la balise par exemple, "div", "durée", etc.
• withDataAndEvents: Boolean
  • "Un Booléen indiquant si les gestionnaires d'événements devrait être copiés avec les éléments. Comme de jQuery 1.4, élément de données seront copiées." info
• deepWithDataAndEvents: Boolean,
  • Une valeur Booléenne indiquant si les gestionnaires d'événements et de données pour tous les enfants de l'élément cloné doivent être copiés. Par défaut, sa valeur correspond au premier argument de la valeur (qui est par défaut à false)." info

Retourne:

Nouvellement créé, l'élément jQuery

Bon, je sais, il y a quelques réponses ici maintenant, mais j'ai pris sur moi pour écrire ce nouveau.

Ici, nous pouvons remplacer le tag de la même façon que nous utilisons le clonage. Nous sommes en suivant la même syntaxe que .clone() avec l' withDataAndEvents et deepWithDataAndEvents qui copie l' enfant nœuds données et des événements si utilisé.

Exemple:

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

Source:

$.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);
        })
    }
})

Notez que ce n'est pas de remplacer l'élément sélectionné, il retourne la nouvelle.

Answer 5

Y a-t-il une raison particulière que vous devez modifier la balise ? Si vous voulez juste pour agrandir le texte, changer la classe CSS de la balise p serait une meilleure façon d’aller à ce sujet.

Quelque chose comme ceci :