innerHTML does not work on span tag

Question

I have the next chunk of html on my html doc:

<p class="load-chart">Carregando Grafico<span id="load-dots">.</span></p>

When I try to use innerHTML on I get the undefined msg, however when I use:

$('#load-dots').text("any new text");

it works fine.

How I fixed

i solved this issue using:

$('span#load-dots').get(0).innerHTML;

Answer 1

innerHTML works fine:

<p class="load-chart">Carregando Grafico<span id="load-dots">.</span></p>

and

document.getElementById("load-dots").innerHTML = "some new text"

See: .innerHTML - JSFiddle

Also if you are already using jQuery, you should use .html. Its not a good practice to mix multiple approaches.

.html() - JSFiddle

Also note that .html or .innerHTML is used to update markup of an element. If you just wish to update text, use .text(). Pure JS alternative would be .textContent

.text() - JSFiddle

Answer 2

Using jQuery one can invoke .html(),

$('#load-dots').html("any new text");