Export HTML form to Excel CSV not working with Element.append() method

Question

Following my previous query:

HTML form output as a table

I would like to export my HTML form output to Excel.

I found several examples on the web and tried some of them...

https://www.revisitclass.com/css/how-to-export-download-the-html-table-to-excel-using-javascript/

https://www.codexworld.com/export-html-table-data-to-csv-using-javascript/

https://odoepner.wordpress.com/2012/04/09/export-to-html-table-as-csv-file-using-jquery/

In all cases, I get only the column titles instead of other rows, as you can see below:

There is something wrong with the Element.append() which can't be picked up properly

My code looks as follows:

    <table id="opresults" class="outputtable"><p class="outputtablehead">Survey Form - output</p>
     <tr class="colname">
       <th class="question">Form question</th>
       <th colspan="2" class="answer">Answer</th>
     </tr>
     <tr>
        <td></td>
        <td></td>
     </tr>
    </table>

        <script>
        const resultsList = document.getElementById('opresults')
        const matches = document.querySelectorAll("fieldset");

        new URLSearchParams(window.location.search).forEach((value, name) => {
            resultsList.append(document.createElement('tbody'))
            resultsList.append(`${name}`)
            resultsList.append(document.createElement('td'))
            resultsList.append(`${value}`)
            resultsList.append(document.createElement('br'))   
            })
           </script>

and another script, which exports the file to .csv is included here:

https://jsfiddle.net/c0urwa5g/1/

Is there any way to include the append() method in this .csv export?

As per another example:

How to export JavaScript array info to csv (on client side)?

It looks like I have to define the column and row names. Unfortunately, I can't here, because they are input-dependant. Is there a way to solve this issue?

The code with another approach is here:

function downloadCSV(csv, filename) {
var csvFile;
var downloadLink;

// CSV file
csvFile = new Blob([csv], {type: "text/csv"});

// Download link
downloadLink = document.createElement("a");

// File name
downloadLink.download = filename;

// Create a link to the file
downloadLink.href = window.URL.createObjectURL(csvFile);

// Hide download link
downloadLink.style.display = "none";

// Add the link to DOM
document.body.appendChild(downloadLink);

// Click download link
downloadLink.click();
 }

 function exportTableToCSV(filename) {
 var csv = [];
 var rows = document.querySelectorAll("table tr");

 for (var i = 0; i < rows.length; i++) {
    var row = [], cols = rows[i].querySelectorAll("td, th");
    
    for (var j = 0; j < cols.length; j++) 
        row.push(cols[j].innerText);
    
    csv.push(row.join(","));        
  }

  // Download CSV file
  downloadCSV(csv.join("\n"), filename);
  }

Answer 1

You aren't creating row elements or inserting cells in those row elements or inserting text into the cells you are creating

You are trying to append everything directly into the table element and that won't work.

You can simplify this using Table.insertRow() and Row.insertCell()

initDemo()

const resultsList = document.getElementById('opresults');

new URLSearchParams(window.location.search).forEach((value, name) => {
  const row = resultsList.insertRow();
  [name, value].forEach(v => row.insertCell().textContent = v); 
})


// for demo only - creates initial url search params
function initDemo() {
  const params = new URLSearchParams([
    ["issue_1", "answer_1"],
    ["thing_2", "answer_2"]
  ]);
  history.pushState(null, null, '?' + params.toString())


}

<p class="outputtablehead">Survey Form - output</p>
<table id="opresults" class="outputtable" border="1">
  <tr class="colname">
    <th class="question">Form question</th>
    <th colspan="2" class="answer">Answer</th>
  </tr>
</table>