title: document.getElementById() - undefined
body: <p>I'm trying to add rows in the table <code>id="main-table-body"</code> by <code>addRow()</code> function call faced the problem that <code>document.getElementById()</code> retrieved <code>undefined</code>. </p>
  
  <p>Browsing Stackoverflow I found a couple of similar questions but the suggested solutions don't work out in my case. I suppose the problem is that at the moment of function execution the html document is not created yet. But even if I put script below the body-tags nothing happens. I would appreciate a lot if you give me an idea what to do. </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;meta http-equiv="content-type" content="text/html" charset="utf-8"&gt;
      &lt;title&gt;Billing system&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/style.css" type="text/css"&gt;
      &lt;script src="scripts.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
      &lt;div id="header"&gt;
          &lt;table id="contractor-info"&gt;
              &lt;tbody&gt;
                  &lt;tr&gt;&lt;td&gt;Contractor&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;Contract No&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;Balance&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
                  &lt;tr&gt;&lt;td&gt;Orders in progress&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  
      &lt;div id="sidebar"&gt;
          &lt;div id="sidebar-buttons"&gt;
              &lt;input type="button" id="add-contractor" value="Add contractor"&gt;&lt;br&gt;
              &lt;input type="button" id="remove-contractor" value="Remove contractor"&gt;&lt;br&gt;
              &lt;input type="button" id="edit-contractor" value="Edit contractor"&gt;&lt;br&gt;
          &lt;/div&gt;
          &lt;div id="sidebar-list"&gt;
              &lt;form&gt;
                  &lt;select size="50"&gt;
                      &lt;option&gt;Contractor #1&lt;/option&gt;
                      &lt;option&gt;Contractor #2&lt;/option&gt;
                      &lt;option&gt;Contractor #3&lt;/option&gt;
                  &lt;/select&gt;
              &lt;/form&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="content"&gt;
          &lt;input type="button" name="add-order" value="Add order"&gt;
          &lt;input type="submit" name="submit-order" value="Submit changes"&gt;
          &lt;input type="button" name="add-payment" value="Add payment"&gt;
          &lt;input type="submit" name="submit-payment" value="Submit changes"&gt;
          &lt;table id="main-table" contenteditable="true"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Contract No&lt;/th&gt;
                      &lt;th&gt;Order No&lt;/th&gt;
                      &lt;th&gt;Order date&lt;/th&gt;
                      &lt;th&gt;Order Amount&lt;/th&gt;
                      &lt;th&gt;Invoice No&lt;/th&gt;
                      &lt;th&gt;Invoice date&lt;/th&gt;
                      &lt;th&gt;Invoice amount&lt;/th&gt;
                      &lt;th&gt;Cleared&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody id="main-table-body"&gt;
                  &lt;tr&gt;
  
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
          &lt;table id="payments-table"&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Amount&lt;/th&gt;
                      &lt;th&gt;Date of payment&lt;/th&gt;
                      &lt;th&gt;Details&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody id="payments-table-body"&gt;
  
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  
  
  &lt;/body&gt;
  
  &lt;script&gt;
      addRow();
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <hr>
  
  <p>JS:</p>
  
  <pre><code>var contentButtons = document.getElementById('content');
  var parentElementMainTable = document.getElementById('main-table-body');
  
  contentButtons.onclick = function(event) {
      var event = event || window.event;
      var target = event.target || event.srcElement;
      if(target.getAttribute('name') == 'add-order') {
          addRow();
      }
  }
  
  function addRow() {
      var tr = document.createElement('TR');
      tr.innerHTML = '&lt;tr&gt; \
          &lt;td&gt;&lt;/td&gt; \
          &lt;td&gt;&lt;/td&gt; \
          &lt;td&gt;&lt;/td&gt; \
          &lt;td&gt;&lt;/td&gt; \
          &lt;td&gt;&lt;/td&gt; \
          &lt;td&gt;&lt;/td&gt; \
          &lt;td&gt;&lt;/td&gt; \
          &lt;td&gt;&lt;/td&gt; \
          &lt;/tr&gt;';
      parentElementMainTable.appendChild(tr);
  }
  </code></pre>