Change tag using javascript

Question

I want to know how can I change a tag with pure javascript like that

    <span>some text</span>

I want to change it to that

  <div>some text</div>

I have no idea how to do it.

Answer 1

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 2

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.

Answer 3

If jquery is acceptable use replaceWith.

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

Here is a JSFIDDLE working DEMO

Answer 4

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 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

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.