dom tree HTML code example

Example 1: HTML DOM

// This is a DOM interface with JAVASCRIPT by using JSON data
// Creating Table with DOM objects


var myData = [{user: "James", address: "123 Keele St. Toronto, ON.", email:"[email protected]"},
              {user: "Mary", address: "92 Appleby Ave. Hamilton, ON.", email:"[email protected]"},
              {user: "Paul", address: "70 The Pond Rd. North Youk, ON.", email:"[email protected]"},
              {user: "Catherine", address: "1121 New St. Burlington, ON.", email:"[email protected]"}];

window.onload = function() {		 
   document.querySelector("#button1").onclick = generateTable;
}

function generateTable(){
   // get the reference for the body
   var tbl = document.querySelector("#outputTable");
 
   // revove existing Body element
   var tblExistingBody = tbl.querySelector("tbody");
   if (tblExistingBody) tbl.removeChild(tblExistingBody);
   
   // creates a <tbody> element
   var tblBody = document.createElement("tbody");
 
   // creating all table rows
   for (var i = 0; i < myData.length; i++) {
      // creates a table row
      var row = document.createElement("tr");
 
      // Create a <td> element and put them at the end of the table row
      row.appendChild(getTdElement(myData[i].user));
      row.appendChild(getTdElement(myData[i].address));
      row.appendChild(getTdLinkElement(myData[i].email, myData[i].email));
 
      // add the row to the end of the table body
      tblBody.appendChild(row);
   }
 
   // put the <tbody> in the <table>
   tbl.appendChild(tblBody);
}

// Create a <td> element and a text
function getTdElement(text) {
   var cell = document.createElement("td");
   var cellText = document.createTextNode(text);
   cell.appendChild(cellText);
   return cell;
}

// Create a <td> element with a hyperlink
function getTdLinkElement(text, href) {
   var anchor = document.createElement("a");
   anchor.setAttribute("href", "mailto:"+href);
   var anchorText = document.createTextNode(text);
   anchor.appendChild(anchorText);
   
   var cell = document.createElement("td");
   cell.appendChild(anchor);
   return cell;
}

Example 2: Html dom

<!-- USING EVENT HANDLER FOR  DOM HTML -->
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title>WEB222</title>
   <style> 
      body { margin: 0 18%; }
   </style>
   <script>
	 window.onload = function() { // why use window.onload?
		 var elem = document.querySelector("#myBtn");
		 elem.addEventListener( "click", displayDate );

	 }

     function displayDate() {
        document.querySelector("#demo").innerHTML = (new Date()).toLocaleString();
	 }
   </script>
</head>
<body>
  <h1>WEB222 - HTML DOM Event</h1>
  <p>Click "Show Current Time" to execute the displayDate() function.</p>
  <p id="demo"></p>

  <button id="myBtn">Show Current Time</button>
  
  <br>
  <!-- for downloading source files -->
  <p><a href="" Download>Download</a></p>
</body>
</html>

Tags:

Html Example

Recent Posts