使用Element.append()创建的表格无法设置样式，如何实现表单问题列加粗

正确代码示例 #

const resultsList = document.getElementById('opresults')
// 统一创建tbody，避免循环重复生成
const tableBody = document.createElement('tbody')
resultsList.appendChild(tableBody)

new URLSearchParams(window.location.search).forEach((value, name) => {
    // 创建行节点
    const tableRow = document.createElement('tr')

    // 创建第一列（Form Question列，需要加粗）
    const questionCol = document.createElement('td')
    questionCol.textContent = name
    // 创建后直接设置样式，再插入DOM
    questionCol.style.fontWeight = 'bold'
    tableRow.appendChild(questionCol)

    // 创建第二列（值列）
    const valueCol = document.createElement('td')
    valueCol.textContent = value
    tableRow.appendChild(valueCol)

    // 把整行插入表格
    tableBody.appendChild(tableRow)
})

核心注意点 #

1. Element.append() 方法的返回值是 undefined，不会返回你刚插入的元素，你原来的写法里var obj = resultsList.append(document.createElement('td'))拿不到任何有效元素，自然没法设置样式。正确的顺序是先创建元素→设置样式→再append到父节点。
2. 要遵守表格的DOM结构规范：正确的层级是table → tbody → tr（行） → td（单元格），你之前直接把文本、td节点直接塞到table根节点下，结构完全错乱，浏览器不会按表格规则渲染，样式自然不生效。
3. 第二种写法里的css()是jQuery的专属方法，原生JavaScript没有这个全局方法，原生设置行内样式直接用元素.style.样式属性的写法即可。
4. 你之前的代码还有拼写错误（比如resultList和resultsList不一致）、参数错误（document.body.appendChild('td')需要传元素节点，不能传字符串），这些也会导致代码运行失败。

内容的提问来源于stack exchange，提问作者Geographos