如何使用JavaScript创建带指定属性的HTML元素并循环插入到表格中

• SVG 元素属于 SVG 命名空间范畴，直接使用document.createElement创建的元素不会被浏览器识别为合法 SVG 节点，无法正常渲染，必须使用document.createElementNS指定命名空间创建
• 原有代码未给th元素添加指定的tableTopContent类，也未设置th的文本内容Day

首先封装可复用的创建函数，方便批量循环调用：

// 固定SVG命名空间，提前定义避免重复写
const SVG_NS = 'http://www.w3.org/2000/svg'
// 封装单个表头创建函数
function createDateHeader(text = 'Day') {
  // 创建th元素并设置属性
  const th = document.createElement('th')
  th.className = 'tableTopContent'
  th.textContent = text

  // 创建svg元素
  const svg = document.createElementNS(SVG_NS, 'svg')
  svg.classList.add('svghidden')

  // 创建line元素
  const line = document.createElementNS(SVG_NS, 'line')
  line.setAttribute('x1', '0')
  line.setAttribute('y1', '50%')
  line.setAttribute('x2', '100%')
  line.setAttribute('y2', '50%')

  // 组装节点
  svg.appendChild(line)
  th.appendChild(svg)
  return th
}

如果需要批量创建插入，直接循环调用即可：

// 示例：批量创建7天的表头
const headerContainer = document.getElementById('celldates')
// 可根据你的需求修改循环次数、表头文本内容
const dayTexts = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
dayTexts.forEach(text => {
  const th = createDateHeader(text)
  headerContainer.appendChild(th)
})

如果不需要动态修改节点属性，也可以直接用innerHTML写法更简洁：

const headerContainer = document.getElementById('celldates')
const dayTexts = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
dayTexts.forEach(text => {
  headerContainer.innerHTML += `
  <th class="tableTopContent">${text}
    <svg class="svghidden">
      <line x1="0" y1="50%" x2="100%" y2="50%"/>
    </svg>
  </th>
  `
})

注意：如果表头文本来自用户输入，使用innerHTML方案前需要做XSS转义处理，避免安全风险

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