Change tag using javascript [duplicate]

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.

Are you wanting your answer in pure Javascript or are you using jQuery? — davidethell
– davidethell, Commented Nov 15, 2012 at 0:27
Also, do you want to replace all instances of <span> tags or just a specific one? — JohnFx
– JohnFx, Commented Nov 15, 2012 at 0:28
Take a look here, it's quite easy to do with jQuery (if you are able to use it) -> jsfiddle.net/JHmaV — David Müller
– David Müller, Commented Nov 15, 2012 at 0:28
I want to know with pure javascript and I want a specific one thank you! and I didnt tried anything because Ihave no clue how to do it. — user1801625
– user1801625, Commented Nov 15, 2012 at 0:30

bdkopen · Accepted Answer · 2017-07-14 04:16:54Z

94

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/

edited Jul 14, 2017 at 4:16

bdkopen

5041 gold badge6 silver badges17 bronze badges

answered Nov 15, 2012 at 0:34

Guffa

703k111 gold badges760 silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

I Hate Lazy Over a year ago

@Guffa: e.parentNode.replaceChild(d, e); but +1 ;-)

Shayan Over a year ago

@IHateLazy @bdkopen Why is insertBeofre() and removeChild() wrong?

Loko Web Design Over a year ago

I realize the original question didn't ask for this, but this doesn't take any attributes with it. In other words, if the original HTML was <span class="foo">bar</span>, it would still make the resulting HTML <div>bar</div>.

ninhjs.dev Over a year ago

1 line version:

document.querySelectorAll(".yuRUbf a").forEach(e=>e.parentNode.replaceChild(Object.assign(document.createElement("div"),{innerHTML:e.innerHTML}),e));

Cloud Over a year ago

Instead of replaceChild on the parent, I prefer to replaceWith directly

|

Juribiyan · Accepted Answer · 2015-08-18 08:30:07Z

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.

answered Aug 18, 2015 at 8:30

Juribiyan

75010 silver badges26 bronze badges

1 Comment

Neithan Max Over a year ago

He explicitly asked for a 'pure javascript' answer.

Siva Manasan · Accepted Answer · 2020-08-22 05:16:30Z

0

If jquery is acceptable use replaceWith.

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

Here is a JSFIDDLE working DEMO

edited Aug 22, 2020 at 5:16

Siva Manasan

1234 silver badges14 bronze badges

answered Nov 15, 2012 at 0:33

Gurpreet Singh

21.3k5 gold badges47 silver badges62 bronze badges

2 Comments

kieran Over a year ago

alternatively without jquery and in a slightly different case: jsfiddle.net/CvRq2

Parsa Yazdani Over a year ago

He asked for a pure javascript answer.

Kenzo-kun · Accepted Answer · 2015-04-30 08:59:34Z

-2

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.

edited Apr 30, 2015 at 8:59

Kenzo-kun

1561 silver badge13 bronze badges

answered Nov 15, 2012 at 0:42

Abraham P

15.6k14 gold badges64 silver badges131 bronze badges

2 Comments

Hybrid web dev Over a year ago

This approach would have all sorts of side effects. Also, using a regexp is expensive and in this case a terrible use case.

osirisgothra Over a year ago

Terrible use case how? Side effects which? You should elaborate as to not waste time when people could read something useful.

Jay Rizzi · Accepted Answer · 2012-11-15 00:31:42Z

-3

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

answered Nov 15, 2012 at 0:31

Jay Rizzi

4,3046 gold badges45 silver badges73 bronze badges

1 Comment

VeteranLK Over a year ago

@bluejayke jsfiddle.net/barney/kDjuf

tonino.j · Accepted Answer · 2012-11-15 00:34:28Z

-3

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.

answered Nov 15, 2012 at 0:34

tonino.j

3,87130 silver badges27 bronze badges

Collectives™ on Stack Overflow

Change tag using javascript [duplicate]

6 Answers 6

7 Comments

1 Comment

2 Comments

2 Comments

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

7 Comments

1 Comment

2 Comments

2 Comments

1 Comment

Comments

Linked

Related