Why can't I access `element.firstChild` in this case?

Question

function setText() {
  // doesn't change... why not!?
  document.getElementById("demo").firstChild.innerHTML = 'changed!';
}

//calling the function with setTimeout to make sure the HTML is loaded
setTimeout(setText, 500);

<div id="demo">
  <p>first</p>
  <p>second</p>
</div>

I can't seem to be able to change <p>first</p> to <p>changed!</p>. Why not?

`firstChild` in this case is a text element representing the whitespace between `
` and `
` — Phil, Dec 28 '17 at 02:59
or even easier ~ `document.querySelector('#demo > *').textContent = 'changed'` — Phil, Dec 28 '17 at 03:00

jeprubio · Accepted Answer · 2017-12-28T03:14:51.763

1

Whitespace inside elements is considered as text, and text is considered as nodes.

If you change the HTML to:

<div id="demo"><p>first</p><p>second</p></div>

it works. Try it.

Or you can use node.firstElementChild to ignore leading text, or use a library like jQuery which takes care of this.

edited Dec 28 '17 at 03:14

answered Dec 28 '17 at 03:11

jeprubio

17,312
5
45
56

Aaaah! That's interesting. Thank you. – Grateful Dec 28 '17 at 03:12
1

That’s kind of weird – WebDeg Brian Dec 28 '17 at 03:13
1

@Phil Sure, it can be optimised. But the question was not asking for an optimised solution. It was asking about the concept... and jeprubio explained it well enough for me to understand! – Grateful Dec 28 '17 at 03:16
@Grateful you don't need to accept an answer. If a duplicate is provided, you can vote on it or wait for the community to do so. – Phil Dec 28 '17 at 03:38

brk · Answer 2 · 2017-12-28T03:16:57.417

1

On consoling document.getElementById("demo").firstChild I get this .

The highlighted part show empty text. That may be the reason as it is not the first p element.

Instead you can use firstElementChild

function setText() {
  document.getElementById("demo").firstElementChild.innerHTML = 'changed!';
}
setTimeout(setText, 1000);

<div id="demo">
  <p>first</p>
  <p>second</p>
</div>

edited Dec 28 '17 at 03:16

answered Dec 28 '17 at 03:14

brk

48,835
10
56
78

1

`nodeType: 3` is the real tell here, not the content – Phil Dec 28 '17 at 03:15

WebDeg Brian · Answer 3 · 2017-12-28T03:36:42.633

0

You can always use children method or querySelector

function SetText(){
  document.getElementById('demo').children[0].textContent = "changed"
}

Or

function SetText() {
  document.querySelector('#demo > *').textContent = "changed"
}

edited Dec 28 '17 at 03:36

answered Dec 28 '17 at 03:17

WebDeg Brian

802
1
7
21

There's no need to use `:first-child`. `querySelector` is already doing that – Phil Dec 28 '17 at 03:20

mep2664 · Answer 4 · 2017-12-28T15:42:08.777

0

Using ".firstChild" will select the whitespace in a div if there is any. In your case there is some. You have two options, either take our the whitespace/newlines or use this function instead...

function setText() {
  // doesn't change because the firstChild isn't the <p> element...
  // try using firstElementChild
  document.getElementById("demo").firstElementChild.innerHTML = 'changed!';
}

edited Dec 28 '17 at 15:42

answered Dec 28 '17 at 03:28

mep2664

104
5

Welcome to Stack Overflow! Although this code may help to solve the problem, it doesn't explain why and/or how it answers the question. Providing this additional context would significantly improve its long-term educational value. Please edit your answer to add explanation, including what limitations and assumptions apply. – рüффп Dec 28 '17 at 09:39

Why can't I access `element.firstChild` in this case?

4 Answers4