Такой вот еще вариант, т.с. для понимания...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='https://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div id="mountains"></div>
<script type="text/javascript">
var MOUNTAINS = [
{name: "Kilimanjaro", height: 5895, place: "Tanzania"},
{name: "Everest", height: 8848, place: "Nepal"},
{name: "Mount Fuji", height: 3776, place: "Japan"},
{name: "Vaalserberg", height: 323, place: "Netherlands"},
{name: "Denali", height: 6168, place: "United States"},
{name: "Popocatepetl", height: 5465, place: "Mexico"},
{name: "Mont Blanc", height: 4808, place: "Italy/France"}
];
function mountain(mountains) {
var table = document.createElement("table");
table.border=1;
var body = document.createElement("tbody");
for (var i=0; i<mountains.length; i++){
var tr = document.createElement("tr");
var td = document.createElement("td");
td.innerHTML=mountains[i].name;
tr.appendChild(td);
td = document.createElement("td");
td.innerHTML=mountains[i].place;
tr.appendChild(td);
body.appendChild(tr);
};
table.appendChild(body);
var div = document.getElementById("mountains");
div.appendChild(table);
}
mountain(MOUNTAINS);
</script>
</body>
</html>
