Breaking News: Grepper is joining You.com. Read the official announcement!

HTML DOM

Add Answer

Kamyab Rouhifar answered on January 2, 2020 Popularity 10/10 Helpfulness 2/10

answer HTML DOM

related remove duplicate objects from array javascript

related what is a DOM

related dom in javascript

HTML DOM

Comment

// 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:"james12@myseneca.ca"},
              {user: "Mary", address: "92 Appleby Ave. Hamilton, ON.", email:"mary356@myseneca.ca"},
              {user: "Paul", address: "70 The Pond Rd. North Youk, ON.", email:"paul345@myseneca.ca"},
              {user: "Catherine", address: "1121 New St. Burlington, ON.", email:"catherine89@myseneca.ca"}];

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;
}

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: dom html javascript

Link to this answer
Share Copy Link

Contributed on Mar 22 2020

Kamyab Rouhifar

0 Answers Avg Quality 2/10

Closely Related Answers

remove duplicate objects from array javascript

Comments(1)

const addresses = [...]; // Some array I got from async call

const uniqueAddresses = Array.from(new Set(addresses.map(a => a.id)))
 .map(id => {
   return addresses.find(a => a.id === id)
 })

Popularity 10/10 Helpfulness 6/10 Language javascript

Source: Grepper

Tags: javascript j

Link to this answer
Share Copy Link

Contributed on Jan 02 2020

Ornate Rock Dragon

0 Answers Avg Quality 2/10

what is a DOM

Comment

The Document Object Model (DOM) is a programming interface for 
web documents.  It represents the page so that programs can 
change the document structure, style, and content. 
The DOM represents the document as nodes and objects; that way, 
programming languages can interact with the page.

A web page is a document that can be either displayed in the 
browser window or as the HTML source. In both cases, it is the 
same document but the Document Object Model (DOM) representation 
allows it to be manipulated. As an object-oriented 
representation of the web page, it can be modified with a 
scripting language such as JavaScript.

Popularity 10/10 Helpfulness 3/10 Language whatever

Source: developer.mozilla.org

Tags: dom

Link to this answer
Share Copy Link

Contributed on Sep 16 2022

amahi2001

0 Answers Avg Quality 2/10

dom in javascript

Comment

Dom => Document object model.
//way to access html and css code through javascript.
//inside document we get all html(head,body=> h1,button,p)
document => 
document.title=> to get title of website
const header= document.getElementsByTagName('h2')
console.log(header) // get HTMLCOLLECTION of all h2 element

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: dom

Link to this answer
Share Copy Link

Contributed on Aug 02 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

HTML DOM

Contents

More Related Answers

HTML DOM

Closely Related Answers

remove duplicate objects from array javascript

what is a DOM

dom in javascript

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.