How Do I Generate a DIV table from a form submission?

How Do I Generate a DIV table from a form submission?

I'm trying to generate a DIV table header row using the JavaScript (no jQuery) shown below but rather than the expected output shown here, what I generate is a row of the items in the array (the headings separated by commas).

I'm trying to generate a DIV table header row using the JavaScript (no jQuery) shown below but rather than the expected output shown here, what I generate is a row of the items in the array (the headings separated by commas).

var main = document.getElementById("left");

var likertTable = document.createElement("DIV"); //main table div likertTable.setAttribute("class", "divTable");

var tableHeading = document.createElement("DIV"); // table heading tableHeading.setAttribute("class", "divTableHeading");

var row = document.createElement("DIV"); row.setAttribute("class", "divTableRow"); tableHeading.appendChild(row); likertTable.appendChild(tableHeading); main.appendChild(likertTable);

var tableHeader = ["Question", "Strongly Agree", "Agree", "Undecided", "Disagree", "Strongly Disagree"]; for (var i = 0; i < tableHeader.length; i++) { var tableCell = document.createElement("DIV"); tableCell.setAttribute("class","divTableCell"); row.appendChild(tableCell); tableCell.innerHTML = tableHeader[i]; } .divTable{ display: table; width: 100%; } .divTableRow { display: table-row; } /.divTableHeading { background-color: #EEE; display: table-header-group; }/ .divTableCell, .divTableHead { border: 1px solid #999999; display: table-cell; padding: 3px 10px; } .divTableHeading { background-color: #EEE; display: table-header-group; font-weight: bold; } .divTableFoot { background-color: #EEE; display: table-footer-group; font-weight: bold; } .divTableBody { display: table-row-group; } <div id="left"></div>


The actual variable is var tableHeader = [ranges]; and it works just fine as seen in the screen capture and the snippet correctly appends if a regular HTML table is generated with a TH rather than DIV tag.

Where am I going wrong? Oh shoot!!! Asked an answered! var tableHeader = [ranges]; should have been var tableHeader = ranges;

Came home as the script ran perfectly in snippets editor.

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

How to Create an Animated Navbar with Html, CSS and JavaScript

In this Html, CSS and JavaScript tutorial you will build an animated navbar with Html, CSS and JavaScript. Have you every wanted to create an awesome animated navbar with JavaScript? We will be looking at making a navbar with Html and CSS and then using the intersection observer in JavaScript to help us create this effect.

TIP Calculator using HTML, CSS & Javascript

We take a deep dive into how to code a tip calculator using HTML, CSS & Javascript. This tutorial can be considered as a beginner tutorial. We look into form inputs, styling form inputs in CSS & HTML while using Javascript to create the interactivity needed to calculate tips.

How Create An Accordion With HTML, CSS, JavaScript

Today we are going to create accordion with html, css and javascript