jQuery / Alterar uma tag HTML
Para alterar uma tag HTML com jQuery, crie um elemento do tipo desejado e substitua o anterior. Atribuir tagName não renomeia o elemento. Para manter valores e eventos dos filhos, mova os nós reais antes de remover o contêiner, em vez de copiar uma string HTML.
Nome da tag e substituição do elemento
O DOM, Document Object Model, representa o documento como objetos de nós. Element.tagName é somente leitura. .attr("tagName", "section") não altera o tipo; .prop() também não permite reescrever essa propriedade.
Crie section com document.createElement() e substitua div com .replaceWith(). O objeto externo é novo, embora pareça mudar apenas o nome. Variáveis que apontavam para div não passam automaticamente a apontar para section.
Este exercício compara estados durante a troca; não é um projeto semântico completo de uma seção independente. No site, escolha section conforme o conteúdo e os títulos. Para mudar apenas a aparência, class e CSS podem ser mais adequados.
Exemplo completo preservando os filhos
Salve tudo em UTF-8 como tag-demo.html e abra no navegador. A Internet carrega o arquivo oficial do jQuery 4.0.0. Não exige servidor ou instalação de pacotes. Os comportamentos principais foram executados no Edge para Windows com 3.7.1 e 4.0.0.
div contém texto, comentário, campo e botão. O botão tem manipulador direto, main tem delegação e div tem seus próprios dados e manipulador. Contadores separados permitem comparar a preservação.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Replace a container tag, keep its children</title>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<style>
body { font: 16px/1.6 sans-serif; margin: 20px; max-width: 760px; }
button, input { font: inherit; max-width: 100%; box-sizing: border-box; }
button { margin: 4px; }
.card { border: 3px solid teal; padding: 16px; margin: 16px 0; }
#result { white-space: pre-wrap; overflow-wrap: anywhere; }
</style>
</head>
<body>
<button type="button" id="change">Change div to section</button>
<button type="button" id="reset">Reset</button>
<main id="board"></main>
<pre id="result" aria-live="polite"></pre>
<script>
$(function () {
let original, originalInput, originalNodes;
let childClicks = 0, wrapperClicks = 0, delegatedClicks = 0;
function report() {
const card = document.getElementById("card");
const sameChildren = originalNodes.every((node, i) => card.childNodes[i] === node);
$("#result").text(`tag=${card.localName}\nsame wrapper=${card === original}\nsame children=${sameChildren}\nsame input=${card.querySelector("input") === originalInput}\ninput=${originalInput.value}\nold data=${$(original).data("lesson")}\nchild=${childClicks}; wrapper=${wrapperClicks}; delegated=${delegatedClicks}`);
}
function reset() {
$("#board").empty();
const card = document.createElement("div");
card.id = "card"; card.className = "card";
card.setAttribute("aria-label", "Editable note");
card.append(document.createTextNode("Keep this text. "), document.createComment("keep this comment"));
const input = document.createElement("input");
input.type = "text"; input.value = "First note"; input.setAttribute("aria-label", "Note");
const button = document.createElement("button");
button.type = "button"; button.className = "inspect"; button.textContent = "Inspect";
card.append(input, button); document.getElementById("board").append(card);
original = card; originalInput = input; originalNodes = Array.from(card.childNodes);
childClicks = wrapperClicks = delegatedClicks = 0;
$(card).data("lesson", "old wrapper").on("click", function () { wrapperClicks++; });
$(button).on("click", function () { childClicks++; });
$(input).on("input", report);
$("#change").prop("disabled", false); report();
}
$("#board").on("click.tagLesson", ".inspect", function () { delegatedClicks++; report(); });
$("#change").on("click", function () {
const old = document.getElementById("card");
const replacement = document.createElement("section");
for (const name of ["id", "class", "aria-label"]) {
if (old.hasAttribute(name)) replacement.setAttribute(name, old.getAttribute(name));
}
// Move existing children BEFORE jQuery removes the old wrapper.
$(replacement).append($(old).contents());
$(old).replaceWith(replacement);
$(this).prop("disabled", true); report();
});
$("#reset").on("click", reset);
reset();
});
</script>
</body>
</html>Saída inicial. same children confere identidade e ordem de texto, comentário e elementos.
tag=div
same wrapper=true
same children=true
same input=true
input=First note
old data=old wrapper
child=0; wrapper=0; delegated=0- Edite First note. Mesmo
<em>Edited note</em>permanece como valor, sem interpretação HTML. - Um Inspect mostra child=1, wrapper=1, delegated=1: respondem botão, div anterior e main.
- Change div to section mostra tag=section, same wrapper=false, same children=true e same input=true. A edição permanece; old data é undefined.
- Outro Inspect mostra child=2, wrapper=1, delegated=2. Evento do filho e delegação permanecem; o evento do div não é transferido.
- Reset recria div, valor inicial e contadores zero. Descarta as edições para uma nova comparação.
Preservação e configuração explícita
Execute $(replacement).append($(old).contents()) antes da substituição. .contents() inclui filhos imediatos do tipo elemento, texto e comentário. append move os objetos existentes, preservando o value atual e os manipuladores dos filhos. Apenas .children() deixaria texto e comentários fora dos elementos para trás.
Depois, .replaceWith() remove o div vazio e limpa seus dados e eventos jQuery. Substituir primeiro e recuperar filhos depois pode perder seu estado nessa limpeza. Não é preservação universal: confira separadamente foco, seleção de texto e referências internas de plugins.
O exemplo copia explicitamente id, class e aria-label. Outros atributos não se transferem sozinhos. Copiar todos pode carregar atributos inválidos, papéis antigos ou eventos inline. Escolha os necessários e revise o significado acessível. jQuery .data() e atributos HTML data-* são armazenamentos diferentes.
.replaceWith() retorna a coleção jQuery original removida, não o novo elemento. Use replacement ou selecione o atual novamente. Se precisar do comportamento externo, configure-o explicitamente no novo ou delegue de um ancestral estável.
Limites e diagnóstico
Ler $(old).html() e aplicar .html() ao novo analisa uma string novamente. Aparência igual não preserva objetos filhos, referências, manipuladores diretos ou valores atuais de formulário. Evite construir HTML de substituição concatenando entradas do usuário.
São contêineres HTML comuns, não um conversor universal para input ou img sem filhos, estruturas especiais de tabelas, controles de formulário, SVG ou elementos personalizados. Confira filhos permitidos e semântica. Trocar button por a também muda papel e comportamento do teclado.
Se a aparência mudar, confira CSS dependente da tag, como div.card, e seletores do tipo anterior. Mantenha id único e preserve rótulos e âncoras. Confira eventos diretos, delegação, foco, significado acessível e recuperação na página real.
