Come sostituire un tag HTML con un altro tag in jQuery?

Question

Ho un sito su cui sto lavorando e utilizza tag "a parte", che non riesco a leggere su IE8, indipendentemente da quello che provo, anche con un Shiv HTML5. Quindi, mi chiedo, come sostituiresti i tag esistenti con altri tag con jQuery?

Per esempio, se volevo cambiare

<aside> 
    <h3></h3> 
</aside> 

a

<div> 
    <h3></h3> 
</div> 

Come vorrei che essere fatto?

Answer 1

Prova questo:

$('aside').contents().unwrap().wrap('<div/>'); 

• ottenere il contenuto di aside prima.
• Ora il contenuto è unwrap.
• Ora semplicemente, wrap i contenuti all'interno di un nuovo tag, qui uno div.

DEMO

---

Inoltre, è possibile farlo utilizzando .replaceWith() metodo come:

$('aside').replaceWith(function() { 
    return $('<div/>', { 
     html: $(this).html() 
    }); 
}); 

DEMO

Answer 2

$('aside').replaceWith('<div><h3></h3></div>'); 

Answer 3

Questo farà il lavoro:

0.123.

$('aside').replaceWith("<div>" + $('aside').html() + "</div>"); 

Anche l'utilizzo di .html() offre un approccio più dinamico.

Answer 4

Questo funziona per ogni elemento del documento e ne preserva il contenuto. L'utilizzo di wraps porta a occorrenze di molti elementi div se sono presenti interruzioni di riga nei contenuti dell'elemento aside.

$('aside').each(function() { $(this).replaceWith("<div>"+$(this).html()+"</div>") });

Answer 5

Ecco una soluzione che sostituisce HTML5 tag blocco, conservando lo stile dei div che sostituiscono i tag HTML5. La semplice sostituzione dei tag lascia gli attributi dietro.

$('article, aside, figcaption, figure, footer, header, nav, section, source') 
    .each(function(){ 
     var el = $(this), 
      html = el.html(), 
      attrs = { 
       "id": el.attr('id'), 
       "classes": el.attr('class'), 
       "styles": el.attr('style') 
      }; 

     console.log('Replacing ' + el.prop('tagName') + ', classes: ' + attrs.classes); 
     el.replaceWith($('<div></div>').html(html).attr(attrs)); 
    }); 

(potrebbe essere necessario un po 'di lavoro sul tag fonte, che ha "src" e "tipo" attributi)