InnerHTML not working

Question

I know similar questions have been asked before here and here. But those don't exactly resemble my situation becase they are trying to change the value of an input box while I am trying to update the HTML of a div element. My issue is that I am calling a JS function right at the top of my HTML page and the function is meant to update the innerHTML of one of the div elements on the page. And for some reason this isn't working. According to an answer to this question, I understand that this could be because I am attempting to access the div even before the page has fully loaded. To resolve this, I tried calling the function from the subject div's onload() event. However, even this refuses to work.

function wotd() {
  $('#wotd').HTML("<strong>test</strong>");
  alert($('#wotd').text());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
  //wotd();
</script>

<div class="col col-md-4">
  <!-- WOTD panel -->
  <div class="panel panel-default panel-box card-effect">
    <div class="panel-heading panel-title">Word of the Day</div>
    <div id="wotd" class="panel-body panel-text" onload="wotd();">
      Word of the day not currently available.
    </div>
  </div>
</div>

The div doesn't have an `onload` event, for starters. – Evan Trimboli Dec 18 '15 at 19:57 — Evan Trimboli, Dec 18 '15 at 19:57

Ibrahim Khan · Accepted Answer · 2015-12-18T20:14:10.020

innerHTML is javasript property. You should use html() in jquery to replace the content of element. And also div does not have onload event. You should do it on document ready or body load like following.

function wotd() {
    $('#wotd').html("<strong>test</strong>");
    alert($('#wotd').text());
}

wotd();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col col-md-4">
  <div class="panel panel-default panel-box card-effect">
    <div class="panel-heading panel-title">Word of the Day</div>
    <div id="wotd" class="panel-body panel-text" onload="wotd();">
      Word of the day not currently available.
    </div>
  </div>
</div>

InnerHTML not working

1 Answers1