Est-ce possible?

exemple:

$('a.change').click(function(){
//code to change p tag to h5 tag
});


<p>Hello!</p>
<a id="change">change</a>

Donc, cliquer sur l'ancre de changement devrait entraîner le <p>Hello!</p>changement de la section (à titre d'exemple) en une balise h5 pour que vous vous retrouviez <h5>Hello!</h5>après le clic. Je réalise que vous pouvez supprimer la balise p et la remplacer par une h5, mais y a-t-il quand même pour modifier une balise HTML?

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

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

Voici une extension qui va tout faire, sur autant d'éléments et autant de manières ...

Exemple d'utilisation:

conserver la classe et les attributs existants:

$('div#change').replaceTag('<span>', true);

ou

Supprimer la classe et les attributs existants:

$('div#change').replaceTag('<span class=newclass>', false);

ou même

remplacer toutes les div par des étendues, copier des classes et des attributs, ajouter un nom de classe supplémentaire

$('div').replaceTag($('<span>').addClass('wasDiv'), true);

Source du plugin:

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

Plutôt que de changer le type de balise, vous devriez changer le style de la balise (ou plutôt la balise avec un identifiant spécifique.) Ce n'est pas une bonne pratique de changer les éléments de votre document pour appliquer des changements stylistiques. Essaye ça:

$('a.change').click(function() {
    $('p#changed').css("font-weight", "bold");
});

<p id="changed">Hello!</p>
<a id="change">change</a>

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

Amélioré replaceTag(<tagName>)

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

Arguments:

• tagName: Chaîne
  • Le nom de la balise, par exemple "div", "span", etc.
• withDataAndEvents: Booléen
  • "Un booléen indiquant si les gestionnaires d'événements doivent être copiés avec les éléments. A partir de jQuery 1.4, les données des éléments seront également copiées." Info
• deepWithDataAndEvents: Booléen ,
  • Une valeur booléenne indiquant si les gestionnaires d'événements et les données de tous les enfants de l'élément cloné doivent être copiés. Par défaut, sa valeur correspond à la valeur du premier argument (qui vaut par défaut false). " Info

Retour:

Un élément jQuery nouvellement créé

D'accord, je sais qu'il y a quelques réponses ici maintenant, mais j'ai pris l'initiative d'écrire ceci à nouveau.

Ici, nous pouvons remplacer la balise de la même manière que nous utilisons le clonage. Nous suivons la même syntaxe que .clone () avec withDataAndEventset deepWithDataAndEventsqui copient les données et les événements des nœuds enfants s'ils sont utilisés.

Exemple:

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

La 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 cela ne remplace pas l'élément sélectionné, il renvoie celui qui vient d'être créé.

L'idée est d'envelopper l'élément et de déballer le contenu:

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;
}

Exemple d'utilisation:

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

Démo

J'ai proposé une approche dans laquelle vous utilisez une représentation sous forme de chaîne de votre objet jQuery et remplacez le nom de la balise à l'aide d'expressions régulières et de JavaScript de base. Vous ne perdrez aucun contenu et n'avez pas à boucler sur chaque attribut / propriété.

/*
 * 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);
}

Enfin, vous pouvez remplacer l'objet / nœud existant comme suit:

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

C'est ma solution. Il permet de basculer entre les balises.

<!DOCTYPE html>
<html>
<head>
	<title></title>

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript">

function wrapClass(klass){
	return 'to-' + klass;
}

function replaceTag(fromTag, toTag){
	
	/** Create selector for all elements you want to change.
	  * These should be in form: <fromTag class="to-toTag"></fromTag>
	  */
	var currentSelector = fromTag + '.' + wrapClass(toTag);

	/** Select all elements */
	var $selected = $(currentSelector);

	/** If you found something then do the magic. */
	if($selected.size() > 0){

		/** Replace all selected elements */
		$selected.each(function(){

			/** jQuery current element. */
			var $this = $(this);

			/** Remove class "to-toTag". It is no longer needed. */
			$this.removeClass(wrapClass(toTag));

			/** Create elements that will be places instead of current one. */
			var $newElem = $('<' + toTag + '>');

			/** Copy all attributes from old element to new one. */
			var attributes = $this.prop("attributes");
			$.each(attributes, function(){
				$newElem.attr(this.name, this.value);
			});

			/** Add class "to-fromTag" so you can remember it. */
			$newElem.addClass(wrapClass(fromTag));

			/** Place content of current element to new element. */
			$newElem.html($this.html());

			/** Replace old with new. */
			$this.replaceWith($newElem);
		});

		/** It is possible that current element has desired elements inside.
		  * If so you need to look again for them.
		  */
		replaceTag(fromTag, toTag);
	}
}


</script>

<style type="text/css">
	
	section {
		background-color: yellow;
	}

	div {
		background-color: red;
	}

	.big {
		font-size: 40px;
	}

</style>
</head>
<body>

<button onclick="replaceTag('div', 'section');">Section -> Div</button>
<button onclick="replaceTag('section', 'div');">Div -> Section</button>

<div class="to-section">
	<p>Matrix has you!</p>
	<div class="to-section big">
		<p>Matrix has you inside!</p>
	</div>
</div>

<div class="to-section big">
	<p>Matrix has me too!</p>
</div>

</body>
</html>

C'est le moyen rapide de modifier les balises HTML dans votre DOM en utilisant jQuery. Je trouve que cette fonction replaceWith () est très utile.

   var text= $('p').text();
   $('#change').on('click', function() {
     target.replaceWith( "<h5>"+text+"</h5>" );
   });

Vous pouvez obtenir par data-*attribut comme data-replace="replaceTarget,replaceBy"si avec l' aide de jQuery pour obtenir replaceTargetet replaceByvaleur par la .split()méthode après l' obtention de valeurs puis utilisez la .replaceWith()méthode.
Cet data-*attribut technique permet de gérer facilement tout remplacement de balise sans changer ci-dessous (code commun pour tout remplacement de balise).

J'espère que l'extrait ci-dessous vous aidera beaucoup.

$(document).on('click', '[data-replace]', function(){
  var replaceTarget = $(this).attr('data-replace').split(',')[0];
  var replaceBy = $(this).attr('data-replace').split(',')[1];
  $(replaceTarget).replaceWith($(replaceBy).html($(replaceTarget).html()));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p id="abc">Hello World #1</p>
<a href="#" data-replace="#abc,<h1/>">P change with H1 tag</a>
<hr>
<h2 id="xyz">Hello World #2</h2>
<a href="#" data-replace="#xyz,<p/>">H1 change with P tag</a>
<hr>
<b id="bold">Hello World #2</b><br>
<a href="#" data-replace="#bold,<i/>">B change with I tag</a>
<hr>
<i id="italic">Hello World #2</i><br>
<a href="#" data-replace="#italic,<b/>">I change with B tag</a>

La fonction suivante fait l'affaire et conserve tous les attributs. Vous l'utilisez par exemple comme ceci:changeTag("div", "p")

function changeTag(originTag, destTag) {
  while($(originTag).length) {
    $(originTag).replaceWith (function () {
      var attributes = $(this).prop("attributes");
      var $newEl = $(`<${destTag}>`)
      $.each(attributes, function() {
        $newEl.attr(this.name, this.value);
      });  
      return $newEl.html($(this).html())
    })
  }
}

Pour être sûr que cela fonctionne, consultez l'exemple suivant

function changeTag(originTag, destTag) {
  while($(originTag).length) {
    $(originTag).replaceWith (function () {
      var attributes = $(this).prop("attributes");
      var $newEl = $(`<${destTag}>`)
      $.each(attributes, function() {
        $newEl.attr(this.name, this.value);
      });  
      return $newEl.html($(this).html())
    })
  }
}

changeTag("div", "p")

console.log($("body").html())

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="A" style="font-size:1em">
  <div class="B" style="font-size:1.1em">A</div>
</div>
<div class="C" style="font-size:1.2em">
  B
</div>
</body>

Y a-t-il une raison spécifique pour laquelle vous devez changer le tag? Si vous voulez simplement agrandir le texte, changer la classe CSS de la balise p serait une meilleure façon de procéder.

Quelque chose comme ça:

$('#change').click(function(){
  $('p').addClass('emphasis');
});