Say I have the following DOM structure and scripts

var test = document.getElementById('test');
test.parentNode.innerHTML += 'hello';
console.log(test.parentNode); // null
console.log(document.getElementById('test').parentNode); // normal result

<div>
<div id="test"></div>
</div>

Say I have the following DOM structure and scripts

var test = document.getElementById('test');
test.parentNode.innerHTML += 'hello';
console.log(test.parentNode); // null
console.log(document.getElementById('test').parentNode); // normal result

<div>
<div id="test"></div>
</div>

As above script says, the first outputs null while the second outputs the actual node, does anyone know why the first output null rather than the normal node?

• javascript
• html

5 Answers 5

After resetting innerHTML property, browser parses the set contents and creates new elements. The test variable doesn't refer to the new element which also has test id. The original test element is detached from the DOM and has no parent element. test and document.getElementById('test') refer to different DOM Element objects.

Use the createTextNode and appendChild methods instead and see the difference:

var test = document.getElementById('test');
test.parentNode.appendChild(document.createTextNode('hello'));
console.log(test.parentNode); 

val += b is actually the same as val = val + b. When written this way, it should be more obvious that you are recreating all elements inside parent.

If you want to append without destroying existing elements, use appendChild and not innerhtml.

Your code in English would say:

• Get me a reference to the DOM node with ID 'test'
• Now take that DOM node out of the DOM tree and replace it with a new node with the text <div id="test"></div>Hello (not a typo, it will put exactly that string in).
• Now show me the parent node of the DOM node you took out of the tree (aha! but it's no longer in the DOM!)
• Now get a reference to a DOM node with the ID "test" (it finds the thing that you inserted in step two.
• Show me the parent of that node (no problem)

The original DOM node 'test' is still in memory, but no longer in the document. You can see this by looking at test.innerHTML, you will see it still has just the original text, because you're looking at the DOM node in memory.

var test = document.getElementById('test');
test.parentNode.innerHTML += 'additional text';
console.log(test.parentNode); // null
console.log(test.innerHTML);
console.log(document.getElementById('test').parentNode); // normal result

<div>
<div id="test">Original text</div>
</div>

The following line:

test.parentNode.innerHTML += 'hello';

is a shortcut for:

test.parentNode.innerHTML = test.parentNode.innerHTML + 'hello';

This means that test is removed and replaced by the same markup + the string "hello". But your test reference is not in the document anymore.

You can try

test.parentNode.appendChild(document.createTextNode('hello'));

While appending html using test.parentNode.innerHTML += 'hello';(which is equal to test.parentNode.innerHTML = test.parentNode.innerHTML + 'hello';), it's actually recreating the element so, test(which is reference to the element) is no longer available in dom.

Instead create textNode using createTextNode method and append using appendChild method which keep the other elements.

var test = document.getElementById('test');
test.parentNode.appendChild(document.createTextNode('hello'));
console.log(test.parentNode);
console.log(document.getElementById('test').parentNode);

<div>
  <div id="test"></div>
</div>