Get element by ID returns null

HMTL

<div><div id="root"></div></div>

Javascript

const data = [{color : "red"},{color : "blue"}, {color : "green"} ];

function libraryRoot(){ 
   load();
    return(`<div id="appDiv">
                ${data.map(function(value){
                    return `<div><p>Color ${value.color} from libraryRoot</p>`
                }).join("")}  
            </div>
          `); 
   }
window.onload = libraryRoot;

   function load(){
    let a=document.getElementById("appDiv");
    console.log(a);
  }

  let defaultLayout = libraryRoot();
  document.getElementById("root").innerHTML = defaultLayout;

Hi Guys i modified the script as you guys suggested, but still the return value at the first instance prints null, and then it prints the div.can you guys help me where im going wrong.

All i wanted to do is i want to call the "appDiv" id and wirte a button funcion to it. like on click {//do something}.

updated Codepen Project