Element.append() 生成不必要的列

Question

我想为我的表格设置样式，该表格说明了我的 HTML 表单的输出。

该表仅包含 2 列。我使用Element.append() 方法来推送我的HTML 表单数据。

我的代码如下：

 <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>

我不知道为什么我的脚本会创建一个额外的空列！

我想使用上面的脚本将我的数据放在运算符中。 是否可以使用Element.append() 方法，或者我应该使用Element.insertAdjacentHTML()

Answer 1

您搞砸了标记嵌套。正确的做法是这样的（如果你对结构不太了解，最好避免写一个衬里）

<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>

Answer 2

您需要在表格中添加行：

<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 tableBody = document.createElement('tbody');
            resultsList.appendChild(tableBody);
                  
            new URLSearchParams(window.location.search).forEach((value, name) => {
                const row = tableBody.insertRow();
                row.insertCell().innerText = `${name}:`;
                row.insertCell().innerText = value;
            });
        </script>
    </tr> 
</table>

这将解决您的对齐问题，但无论如何我建议您重新编写此标记，因为 <tr> 元素中的 <script> 和 <table> 中的 <p> 元素并不真正属于那里。