How can I hold the selected element's node by value (and not reference) in Javascript?

Question

I had to remove everything in the body except for images in the DOM. So, this is what I did.

1. Stored the img tags in the variable.

   var img_nodes = document.getElementsByTagName('img');

2. Removed every thing inside the body

   var body_node = document.getElementsByTagName('body'); body_node[0].innerHTML = ''

3. Added the stored img nodes as children

   for each (child in img_nodes){ body.appendChild(child); }

But after I had run body_node[0].innerHTML = '' , the img_nodes became undefined .

I guess that happened because element node was being stored in list as objects (as a reference). How can I save my selected img_nodes objects ?

Answer 1

You could clone the image nodes before clearing the body contents. See the documentation on cloneNode . Example:

var cloned_nodes = [];
for each (child in img_nodes){
    cloned_nodes.push(child.cloneNode(true));
}