javascript cloneNode deep but change parent nodeType/nodeName

Question

How to cloneNode and then convert that nodeName, cuz I want the attributes copied and children deeply (https://developer.mozilla.org/en-US/docs/Web/API/Node.cloneNode?redirectlocale=en-US&redirectslug=DOM%2FNode.cloneNode)

so like: i have a span with a bunch of attributes and children. i want the same thing but i want it a div

much thanks

after i manage to clone and change to div i want to replace the span with it. also is there a way to clone all event listeners on it?

Answer 1

the following doesn't handle text children which are directly under the original span element, but otherwise should work fine.

    mutantClone = document.createElement("div");
    for (var i=0; i<original.childNodes.length; i++){
        var child = original.childNodes[i];
        var childClone = child.cloneNode(true);
        mutantClone.appendChild(childClone);
    }