javascript - Insert a div element as parent

Question

I'm just wondering if the following is possible, lets say we have a dom element and we want to wrap this element in a div. So a div is inserted between the element and it's parent. Then the div becomes the element's new parent.

But to complicate things, elsewhere we have already done things like:

var testElement = document.getElementByID('testID')

where testID is a child of the element to be warapped in a div. So after we have done our insertion will testElement still be valid?

BTW: I'm not using jquery.

Any ideas?

Thanks,

AJ

Answer 1

You can use replaceChild ^[docs]:

// `element` is the element you want to wrap
var parent = element.parentNode;
var wrapper = document.createElement('div');

// set the wrapper as child (instead of the element)
parent.replaceChild(wrapper, element);
// set element as child of wrapper
wrapper.appendChild(element);

As long as you are not using innerHTML (which destroys and creates elements), references to existing DOM elements are not changed.