Is it possible to change paragraph tag to header tag by using JavaScript?

Question

I'm trying to change a paragraph element by its ID in JavaScript to a h1.

My HTML

<body>
   <p id="damn"> Hello </p>
</body>

My JavaScript

<script>
    document.getElementByID("damn").<required missing code to change to h1>
</script>

The required result is

<body>
   <h1 id="damn"> Hello </h1>
</body>

http://stackoverflow.com/questions/918792/use-jquery-to-change-an-html-tag — JosephG, Jul 04 '13 at 07:15
read the second answer. http://stackoverflow.com/questions/3435871/jquery-how-to-change-tag-name — Mithun Satheesh, Jul 04 '13 at 07:18
see here :: http://stackoverflow.com/questions/843680/how-to-replace-dom-element-in-place-using-javascript — Sudhir Bastakoti, Jul 04 '13 at 07:19

rid · Accepted Answer · 2013-07-04T07:39:30.250

2

function changeTagName(el, newTagName) {
    var n = document.createElement(newTagName);
    var attr = el.attributes;
    for (var i = 0, len = attr.length; i < len; ++i) {
        n.setAttribute(attr[i].name, attr[i].value);
    }
    n.innerHTML = el.innerHTML;
    el.parentNode.replaceChild(n, el);
}

changeTagName(document.getElementById('damn'), 'h1');

(fiddle)

edited Jul 04 '13 at 07:39

answered Jul 04 '13 at 07:23

rid

61,078
31
152
193

+1 this should be the accepted answer. It maintains all of the original elements attributes and by using innerHTML instead of textContent, it will retain any child elements (such as spans that might have style attached). – MrCode Jul 04 '13 at 07:41

Thomas Junk · Answer 2 · 2013-07-04T07:20:40.740

1

var elem=document.getElementById("damn");
var parent=elem.parentNode;
var newElement=document.createElement("h1");
newElement.textContent=elem.textContent;
newElement.id=elem.id;
parent.replaceChild(newElement, elem);

That should do the trick. Play around with me.

edited Jul 04 '13 at 07:20

answered Jul 04 '13 at 07:14

Thomas Junk

5,588
2
30
43

2

Please include newElement.id = elem.id; – Harsha Venkataramu Jul 04 '13 at 07:15
This is close but it won't take the original elements position in relation to its siblings. – MrCode Jul 04 '13 at 07:17
According to the given example, it does its job well. there are no siblings in the example ;) – Thomas Junk Jul 04 '13 at 07:18

Is it possible to change paragraph tag to header tag by using JavaScript?

2 Answers2

Linked