Failed to execute 'insertBefore' on 'Node'

<div id='dashboard'>
    <div class='container' id='dash-top'>
      <div id='tab'>
        <h3>Dashboard</h3>
      </div>
      <div id='search'>
        <input type='text' placeholder='search'>
      </div>
    </div>
    <canvas id='widgets'></canvas>
  </div>

//insert alert into html...
function alertBox() {
  const widgets = document.getElementById('widgets');
  const parentDiv = widgets.parentNode;

// test correct div is logging out to console
  console.log(parentDiv);

  const alertDiv = document.createElement('div');
  const alertText = document.createElement('p');
  const closeAlert = document.createElement('p');
  alertText.innerHTML = '<span>Alert</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis in orci id ex interdum accumsan eget eu elit. In risus neque, fermentum sed nibh.';
  closeAlert.innerHTML = 'X';
  closeAlert.id = 'close-alert';
  alertDiv.id = 'alert';
  alertDiv.appendChild(alertText);
  alertDiv.appendChild(closeAlert);
  parentDiv.insertBefore(widgets, alertDiv);
}


//...when page loads
document.onload = alertBox();