Using innerHTML has no effect

Question

I am trying to use javascript to dynamically change the header to my website and thus the header was not changing. My html, for simplicity, looks like

&ltdiv class="container"&gt
  &lth1 id="name"&gtNic&lt/h1&g
  &ltp id="email"&gt&lt/p&gt
  &lthr&gt
&lt/div&gt

&ltscript src="js/something.js"&gt&lt/script&gt

My javascript lives in a file called something.js and looks like

$(document).ready(function() { 
    console.log('I got run');
    $('#name').innerHTML = "YO";
    $('#email').innerHTML = "why hello";
})

For some reason I see the log in the console but the html never changes. Why is the header not getting changed?

I did try looking at the stack overflow question Javascript: Does not change the div innerHTML and here Setting innerHTML: Why won't it update the DOM? and many others however none of them address my issue.

Answer 1

In jQuery you use .html("text") instead of .innerHTML

$(document).ready(function() { 
    console.log('I got run');
    $('#name').html("YO");
    $('#email').html("why hello");
})

Answer 2

Jquery doesn't have innerHTML property to set html instead it has method.

Use .text() if your content is only plain text

Like this

 $('#name').text("YO");

If it has html content then use .html()

Like this

 $('#name').html("<p>YO</p>");

DEMO