Page does not permanently load with the . load (jQuery) command of my script (Javascript)

Question

After I click on the element the inside of my Dasboard does not load the way I expected.

Before clicking:

It seems to me that the script cuts alone the .load since it loads the page for a second and then the main turns white again.

After clicking:

Script I’m using:

  document.getElementById("botao1").onclick = function(){BoardToMiddle1()};
  function BoardToMiddle1() {
      $("#div1").load("IndexHome.php");
  }

Element that after clicking, loads the script:

          <a class="mdl-navigation__link text-white" href="" id="botao1" onclick="BoardToMiddle1"><i class="mdl-color-text--blue-grey-400 material-icons" role="presentation">home</i>Página Inicial</a>

Main: (I made the div to test if it was the main one that was bugging)

        <main class="mdl-layout__content mdl-color--grey-100" id="main1">
        <div id="div1"></div>
    </main>

Answer 1

The <a> with href empty will reload the current page. You need to cancel the click on event <a> sending the event to the function and using event.preventDefault():

document.getElementById("botao1").onclick = function(event){BoardToMiddle1(event)};
function BoardToMiddle1(event) {
   event.preventDefault();
   $("#div1").load("IndexHome.php");
}