javascript - Element.append() generates unnecessary column

Question

I want to style my table, which states an output of my HTML form.

The table was meant to include 2 columns only. I used the Element.append() method for pushing my HTML form data through.

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 class="answer">Answer</th>
    </tr>
    <tr class="opcontent">
        <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(document.createElement('td'),`${name}:`)
                resultsList.append(document.createElement('td'))
                resultsList.append(`${value}`)
                resultsList.append(document.createElement('br'))   
               
            })
        </script> 
    </tr>
</table>

I don't know why my script creates an additional empty column!

I would like to have my data placed within the operator by using the script above. Is it possible with Element.append() method, or maybe should I go with Element.insertAdjacentHTML()

Answer 1

You've messed up the mark up nesting. The correct way to do it is like this (it's always good to avoid writing one liner if you don't understand the structure well)

<table id="opresults" class="outputtable">
  <p class="outputtablehead">Survey Form - output</p>
  <tr class="colname">
    <th class="question">Form question</th>
    <th class="answer">Answer</th>
  </tr>
  <tr class="opcontent">
    <script>
      const resultsList = document.getElementById('opresults')
      const matches = document.querySelectorAll("fieldset");
      const innerBody = document.createElement('tbody');
      resultsList.append(innerBody);

      new URLSearchParams(window.location.search).forEach((value, name) => {
        const row = document.createElement('tr');
        const tdName = document.createElement('td');
        const tdValue = document.createElement('td');

        tdName.innerText = name;
        tdValue.innerText = value;

        row.append(tdName);
        row.append(tdValue);

        innerBody.append(row);
      })

    </script>
  </tr>
</table>