Change tag using javascript [duplicate]

Answer 1

If jquery is acceptable use replaceWith.

$('span').each(function() {
    
  $(this).replaceWith($('<div>' + this.innerHTML + '</div>'));
 
});

Here is a JSFIDDLE working DEMO

Answer 2

If using jquery

 Var spantxt = $('span').text();
 $('body').append('<div>'+spantext+'</div');

Note this would only work if there was only one span, use an id selector otherwise

Answer 3

Assumption: The span you want to replace is wrapped in a div with id "foo"

In pure javascript you could do something like:

 var original_html = document.getElementById('foo').innerHTML;

 original_html = original_html.replace("<span>", "<div>");

 original_html = original_html.replace(new RegExp("</span>"+$), "</div">)
 document.getElementById('foo').innerHTML=original_html;

If however you can not necessarily expect the span to be tightly wrapped by an element you can consistently get (by id or otherwise), the javascript becomes fairly complex. In either case, the real answer here is: use jQuery.

Answer 4

You can't change the type of an element like that, instead you have to create a new element and move the contents into it. Example:

var e = document.getElementsByTagName('span')[0];

var d = document.createElement('div');
d.innerHTML = e.innerHTML;

e.parentNode.replaceChild(d, e);

Demo: http://jsfiddle.net/Guffa/bhnWR/

Answer 5

You can't do it. What you want to do is to take content of your span, then delete it and create new div and fill it with previous content.

Answer 6

Just written a jQuery plugin for this.

(function( $ ) {
  $.fn.replaceTag = function(newTag) {
    var originalElement = this[0]
    , originalTag = originalElement.tagName
    , startRX = new RegExp('^<'+originalTag, 'i')
    , endRX = new RegExp(originalTag+'>$', 'i')
    , startSubst = '<'+newTag
    , endSubst = newTag+'>'
    , newHTML = originalElement.outerHTML
    .replace(startRX, startSubst)
    .replace(endRX, endSubst);
    this.replaceWith(newHTML);
  };
})(jQuery);

Usage:

$('div#toChange').replaceTag('span')

The biggest advantage of this method is that id preserves all the attributes of the original element.