Luego de de una extensa selección de datos hemos podido resolver esta impedimento que suelen tener muchos lectores. Te regalamos la solución y nuestro objetivo es que sea de mucha apoyo.
Ejemplo 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;
Ejemplo 2: Html dom
<htmllang="en"><head><metacharset="UTF-8"/><title>WEB222title><style>bodymargin:018%;style><script>window.onload=function()// why use window.onload?var elem =document.querySelector("#myBtn");
elem.addEventListener("click", displayDate );functiondisplayDate()document.querySelector("#demo").innerHTML=(newDate()).toLocaleString();script>head><body><h1>WEB222 - HTML DOM Eventh1><p>Click "Show Current Time" to execute the displayDate() function.p><pid="demo">p><buttonid="myBtn">Show Current Timebutton><br><p><ahref=""Download>Downloada>p>body>html>Tienes la opción de ayudar nuestro quehacer exponiendo un comentario o dejando una valoración te lo agradecemos.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)