Use jQuery para alterar uma tag HTML?

Isso é possível?

exemplo:

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

Hello!

change

Portanto, clicar na âncora de alteração deve fazer com que a seção

Hello!

mude para (como um exemplo) uma tag h5 para que você acabe com

Hello!

após o clique. Eu percebo que você pode excluir a tag p e substituí-la por um h5, mas existe alguma maneira de realmente modificar uma tag HTML?

   

Uma vez que um elemento dom é criado, a tag é imutável, acredito. Você teria que fazer algo assim:

 $(this).replaceWith($('
' + this.innerHTML + '
'));

Aqui está uma extensão que fará tudo, em tantos elementos de várias maneiras …

Exemplo de uso:

mantenha a class e os atributos existentes:

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

ou

Descartar a class e os atributos existentes:

$('div#change').replaceTag('', false);

ou até mesmo

substitua todos os divs por spans, copie classs e atributos, adicione um nome de class extra

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

Fonte de 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); }); } }); 

Em vez de alterar o tipo de tag, você deve alterar o estilo da tag (ou melhor, a tag com um ID específico). Não é uma boa prática alterar os elementos do documento para aplicar alterações estilísticas. Tente isto:

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

Hello!

change

Percebi que a primeira resposta não era exatamente o que eu precisava, então fiz algumas modificações e imaginei que a colocaria de volta aqui.

replaceTag() melhorada replaceTag()

replaceTag(, [withDataAndEvents], [withDataAndEvents])

Argumentos:

  • tagName: string
    • O nome da tag, por exemplo, “div”, “span”, etc.
  • withDataAndEvents: Boolean
    • “Um Booleano que indica se os manipuladores de events devem ser copiados junto com os elementos. A partir do jQuery 1.4, os dados dos elementos serão copiados também.” informação
  • deepWithDataAndEvents: Boolean ,
    • Um Booleano que indica se os manipuladores de events e dados para todos os filhos do elemento clonado devem ser copiados. Por padrão, seu valor corresponde ao valor do primeiro argumento (cujo padrão é false). ” Info

Retorna:

Um elemento jQuery recém-criado

Ok, eu sei que há algumas respostas aqui agora, mas eu me encarreguei de escrever isso novamente.

Aqui podemos replace a tag da mesma maneira que usamos clonagem. Estamos seguindo a mesma syntax de .clone () com os withDataAndEvents e deepWithDataAndEvents que copiam os dados e events dos nós filhos , se usados.

Exemplo:

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

Fonte:

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

Note que isso não substitui o elemento selecionado, ele retorna o recém-criado.

Existe um motivo específico para alterar a tag? Se você quer apenas tornar o texto maior, mudar a class CSS da tag p seria uma maneira melhor de fazer isso.

Algo assim:

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

Eu criei uma abordagem onde você usa uma representação de string do seu object jQuery e substitui o nome da tag usando expressões regulares e JavaScript básico. Você não perderá nenhum conteúdo e não terá que passar por cima de cada atributo / propriedade.

 /* * 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 + ""; } return $(elementString); } 

Finalmente, você pode replace o object / nó existente da seguinte maneira:

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

Esta é minha solução. Permite alternar entre as tags.

 < !DOCTYPE html>           

Matrix has you!

Matrix has you inside!

Matrix has me too!