getting the inner text of a node

Question

I am having trouble getting the inner text of a particular node. I have added the example node I am working with and the javascript I have come up with. The javascript works as far as returning this <span id="goal_left">3 goals lect</span> if i log it to the console. If i add innerText to the javascript examples it will return nothing to the console. Any ideas how to get this text?

html

<span id="goal_left">3 goals lect</span> 

javascript: these examples return <span id="goal_left">3 goals lect</span>

document.getElementById("goal_left");  document.querySelectorAll("span#goal_left")[0]; 

javascript: these examples return nothing

document.getElementById("goal_left").innerText;  document.querySelectorAll("span#goal_left")[0].innerText; 

Answer 1

Probably the easiest way:

document.querySelectorAll("span#goal_left")[0].firstChild.nodeValue; 

Though if you always want the first node returned by querySelectorAll() you could simply use:

document.querySelector("span#goal_left").firstChild.nodeValue; 

Incidentally, I'd imagine any browser that implements querySelectorAll()probably implements textContent, giving:

document.querySelector("span#goal_left").textContent; 

Just to offer a cross-browser option:

var textProperty = 'textContent' in document ? 'textContent' : 'innerText'; document.getElementById('goal_left')[textProperty]