Objective

Create two variants of a function to build an HTML table based on a given array of items.

Difficulty

Average

Description

Consider the following array of objects:

var languages = [
   {name: 'JavaScript', releaseDate: 1995, fileExtension: '.js', creator: 'Brendan Eich'},
   {name: 'Java', releaseDate: 1995, fileExtension: '.java', creator: 'James Gosling'},
   {name: 'PHP', releaseDate: 1995, fileExtension: '.php', creator: 'Rasmus Lerdorf'},
   {name: 'C++', releaseDate: 1985, fileExtension: '.cpp', creator: 'Bjarne Stroustrup'},
];

Each object represents information of a particular programming language, such as its name, its release date, its creator, its file extension, and so on.

If we were to convert this array into a table, we'd get the following:

NameRelease DateFile ExtensionCreator
JavaScript1995.jsBrendan Eich
Java1995.javaJames Gosling
PHP1995.phpRasmus Lerdorf
C++1985.cppBjarne Stroustrup

Notice the headings here. They are just the keys of the objects in the array, converted from camel case to title case. Apart from the table's header, each subsequent row represents an item of the array.

In this exercise, you have to define two variants of a function createTable() that creates a <table> based on a given array, as demonstrated above.

The function accepts two arguments: the first one is the array to use to create a table whereas the second argument is an element node where we wish to insert the table created.

Here's what the variants are about.

Variant 1

In the first variant of createTable(), you MUST ONLY use DOM mutation properties, such as innerHTML and textContent. You MUST NOT use any DOM mutation method such as appendChild(), insertBefore(), etc.

Variant 2

In the second variant of createTable(), you have do the opposite of variant 1.

That is, you MUST NOT use any DOM mutation properties, such as innerHTML and textContent. Instead, you MUST ONLY use DOM mutation methods such as appendChild(), insertBefore(), etc.

Both these variants only differ in their underlying implementation; the result produced is exactly the same.