Изменить имя тега HTML с помощью Pure JS

Question

<div id="demo"></div>
document.getElementsById("demo").onclick = function() {
    this.tagName = "p";
};
// and then the output should be:
<p id="demo"></p>

Я хочу использовать чистый JavaScript для изменения имени тега,
кто-нибудь может помочь, пожалуйста?

Answer 1

С некоторой шикарной манипуляцией Dom вы можете сделать это легко.

Вам просто нужно создать новый элемент, переместить все элементы, чтобы сохранить обработчики onclick и тому подобное, а затем заменить исходную вещь.

function addClickEventToSpan() {
  document.getElementById('whoa').addEventListener("click",function(){alert('WHOA WORLD! HELLO!');});
}
function transform(id){
     var that = document.getElementById(id);
  
     var p = document.createElement('p');
     p.setAttribute('id',that.getAttribute('id'));
     
     // move all elements in the other container.
     // remember to use firstchild so you take all the childrens with you and maintain order.
     // unles you like reversed order things.
     while(that.firstChild) {
       p.appendChild(that.firstChild);
     }
     that.parentNode.replaceChild(p,that);
     
}

p { background-color:green;color:white; }
div { background-color:blue;color:white; }

<div id="demo">Hello fantastical<span id="whoa" style="color:red">WORLD</span>
       <UL>
          <LI>something</LI>
  </UL>
</div>

<input type="button" onclick="addClickEventToSpan('demo')" value="bind event handler(click WORLD)">
<input type="button" onclick="transform('demo')" value="transform">