Javascript Basics 3 - Dom Ready and Load

Dom Ready and Load events

HTML

<div id="op" class="article"></div>

CSS

body {
  font-family: tahoma;
  font-size: 11pt;
}

.article {
  border: solid 1px #000;
  border-radius: 5px;
  width: 90%;
  height: 200px;
  background-color: #AAD;
  margin: 1em;
  box-shadow: 2px 2px 5px #333;
  padding: .5em;
 }

JavaScript

//do not wrap the JavaScript code, place it in <head> section
//do not wrap the JavaScript code, place it in <body> section
//in this example, we have to do it in no wrap (head) so that domready can use $
//dom ready gets fired when DOM i.e various HTML objects that make up the document are loaded
//load is fired when everything (external images, css, js) are loaded.
this.addEventListener("DOMContentLoaded", domIsReady, true);


function domIsReady(e) {
    
    op = document.getElementById("op");
   
    op.innerHTML="She Sells Sea Shells by the Sea Shore";
}