In Javascript, why does setting outerHTML on an element set its parentNode to 'null'?

Question

In Javascript, when I set the outerHTML of an element in the DOM to a new value (to change it into a different element, for example), its 'parentNode' property gets set to 'null'. Why? I would expect it to remain at whatever value it was at before the outerHTML change.

I guess that the DOM is creating a new object from parsing the 'outerHTML' string and using it to replace the original object. If this is the case, is there a method to retrieve that newly created object?

Steps to reproduce (tested on Linux Chrome & Linux Firefox)

1. Open a clean window in your browser,

2. Open the dev console (F12, probably)

3. Take a look at the page DOM (Element tab in Chrome, Inspector in Firefox)

4. Delete any children of the 'body', just to make things cleaner

5. Open the console and type:

   obj1 = document.createElement('div')

   obj1.id = '1'

   document.body.appendChild(obj1);

   obj1.parentNode - Should write the 'body' HTML to the console.

   obj1.outerHTML = "<div id='2'></div>"

   obj1.parentNode - Now writes 'null' to the console.

Answer 1

This is as per doc

Also, while the element will be replaced in the document, the variable whose outerHTML property was set will still hold a reference to the original element:

which means obj1 in your code is still referring to original element which has been detached from the DOM tree by now.