使用createElement创建的元素调用insertAdjacentHTML不生效问题排查

问题根因 #

你遇到的问题和后续给table内容插入内容用insertAdjacentHTML无关，问题出在调用pageHeading.insertAdjacentHTML时的传参不符合方法要求：
insertAdjacentHTML的第二个参数必须是HTML格式的字符串，你传入的是createElement生成的DOM对象，JS会自动将DOM对象转为普通字符串，最终就渲染出了[object HTMLTableElement]。

另外你第二种尝试里写的tableHeading变量不存在，你实际定义的h1元素变量是pageHeading，就算要插入到h1内部也应该用pageHeading.appendChild(table)。

修复方案 #

推荐使用专门用来插入DOM元素的insertAdjacentElement方法，替换你原来的insertAdjacentHTML代码段即可，无需修改其他逻辑：

// 替换原来的pageHeading.insertAdjacentHTML代码
pageHeading.insertAdjacentElement("afterend", table)

完整可运行代码 #

<!DOCTYPE html>
<html>
<body>
<h1 id="pageHeading">Table</h1>
<h2>Test</h2>
<script>
const tableHeaders = [{
  titleOne: "Name",
  titleTwo: "Age",
  titleThree: "Nationality",
}]

const persons = [
  {
    name: "James",
    age: "23",
    nationality: "English",
  },
  {
    name: "Isabella",
    age: "21",
    nationality: "Italian",
  },
  {
    name: "Hank",
    age: "25",
    nationality: "American",
  },
  {
    name: "Manon",
    age: "27",
    nationality: "French",
  },
]
const pageHeading = document.querySelector("#pageHeading")

const table = document.createElement("table")
table.setAttribute("id", "table")
// 修复后的插入代码
pageHeading.insertAdjacentElement("afterend", table)

const headers = tableHeaders.map(header => {
  let ths = `<tr><th>${header.titleOne}</th><th>${header.titleTwo}</th><th>${header.titleThree}</th></tr>`
  table.insertAdjacentHTML("afterbegin", ths)
})

const personDetails = persons.map(person => {
  let tds = `<tr><td>${person.name}</td><td>${person.age}</td><td>${person.nationality}</td></tr>`
  table.insertAdjacentHTML("beforeEnd", tds)
})
</script>
</body>
</html>

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