2

Existe algum modo em JS/JQuery de alterar uma tag no HTML?

Por exemplo, tenho uma:

<div></div>

E quero, vamos supor que quero que vire um span:

<span></span>

Resumindo, trocar:

<div></div>

Por:

<span></span>

Ou por qualquer outra tag, é possivel? Por exemplo, usar um remove() e depois um insert mas a tag do insert ficar no mesmo local da tag que removi.

1
  • 3
    Naturalmente isso é impossível. Uma vez que um elemento foi criado, ele é imutável. Muito provável que toda e qualquer forma de fazer isso vai ser uma gambiarra e estará sujeita a falhas.
    – Jéf Bueno
    Commented 22/05/2017 às 12:55

3 Respostas 3

7

Mudar o próprio elemento não é possivel. Mas podes mudar o HTML, se não precisares de auscultadores de eventos.

Podes fazer isso com alguns passos:

  • cria um elemento novo
  • coloca-o antes do elemento que tens
  • muda o conteudo para o novo
  • apaga o antigo

var novo = $('<div/>');
var antigo = $('span');
antigo.before(novo);
novo.append(antigo.children());
antigo.remove();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>
  <p>Olá!</p>
</span>

1
  • Obrigado a todos, mas gostei da ideia do Sergio, do "cria um elemento novo coloca-o antes do elemento que tens muda o conteudo para o novo apaga o antigo", deu certo, muito obrigado! Commented 22/05/2017 às 13:37
3

Como o @jbueno comentou, alterar a própria tag é impraticável, o mais perto que podemos chegar disso seria algo do tipo:

$('div').click(function() {
   $(this).replaceWith($('<section style="border:1px solid red;" >' + this.innerHTML + '</section>'));
});

$('span').click(function() {
   $(this).replaceWith($('<h2>' + this.innerHTML + '</h2>'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="border:1px solid green;">
  div
</div>

<span>teste</span>

1

Não tenho certeza sobre alterar a tag, mas você pode adicionar uma classe hidden e remover outra classe hidden com addClass() e removeClass() do jQuery.

Ex:

<div style="hidden" id="divescondida">...</div>
<span style="" id="spanamostra">...</span>

<script>
  $("#divescondida").removeClass("hidden");
  $("#spanamostra").addClass("hidden");
</script>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .