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]