Question

Im trying to get a solution to create a new element and append it around an empty element such like IMG, INPUT’s
i could easly just add a parent element around the IMG or INPUT, but i would rather do in via the DOM only.
The only way ive been able to do this so far is using cloneNode and appending it to the newly created element.

Example add a DIV via DOM around the already present IMG

Before:

<input type="text" />

After:

 <div><input type="text" /></div>

This is what i have created and works but because it deletes the node the defualt values get wiped i hope there is an simpler way to create and element and append around the INPUT

<input id="ic706" type="text" />

.

var e = document.getElementById("ic706")
var cloned = e.cloneNode(false);

e.parentNode.removeChild(e);

var c = document.createElement("div");
c.id = "container";

document.body.appendChild(c);
document.getElementById("container").appendChild(cloned);

Answer 1

I’d suggest:

function wrapElem(el, wrapWith) {
    var newElem = document.createElement(wrapWith);
    el.parentNode.insertBefore(newElem, el);
    newElem.appendChild(el);
}

wrapElem(document.getElementsByTagName('input')[0], 'div');

JS Fiddle demo.

And seems to preserve event-binding.

This works by creating a new element, inserting it before the element you want to wrap, and then moving the element to wrap into the wrapper, rather than deleting and recreating; so this should preserve any events, and properties, bound to the element.