insertAdjacentHTML 不适用于创建的元素答案

【问题标题】：insertAdjacentHTML not working with created elementinsertAdjacentHTML 不适用于创建的元素
【发布时间】：2021-12-01 19:21:33
【问题描述】：

我想在 ID 为 pageHeading 的 h1 之后显示 table。 h1 的 HTML 是硬编码的：<h1 id="pageHeading">Table</h1>

const pageHeading = document.querySelector("#pageHeading")

表是用Javascript创建的：

const table = document.createElement("table")
table.setAttribute("id", "table")

我尝试了以下方法：

document.body.appendChild(table)

这将打印table，但在页面上的最后一个 HTML 元素之后。

然后我尝试了：

tableHeading.appendChild(table)

这会打印 table 但在 h1 内部。

最后，我尝试了：

pageHeading.insertAdjacentHTML(
  "afterend",
  table
)

这根本不打印表格。相反，我得到（在h1 之后）：

[object HTMLTableElement]

这可能是因为我在table 内容上使用了.insertAdjacentHTML（请参阅下面的完整代码）？

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")
/* document.body.appendChild(table) this puts table AFTER the last item in the body <h2>Test</h2> */
/* tableHeading.appendChild(table) this puts table INSIDE <h1 id="tableHeading">Table</h1> */
pageHeading.insertAdjacentHTML(
  "afterend",
  table
) /* this returns: [object HTMLTableElement] */

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

<h1 id="pageHeading">Table</h1>

<h2>Test</h2>

【问题讨论】：

insertAdjacentHTML 需要一个字符串值作为第二个参数，而不是 HTML 元素对象。

标签： javascript html insertadjacenthtml

【解决方案1】：

您需要insertAdjacentElement 而不是使用insertAdjacentHTML，因为它是一个元素而不是像这样的html 字符串：

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")
/* document.body.appendChild(table) this puts table AFTER the last item in the body <h2>Test</h2> */
/* tableHeading.appendChild(table) this puts table INSIDE <h1 id="tableHeading">Table</h1> */

pageHeading.insertAdjacentElement(
  "afterend",
  table
) /* this returns: [object HTMLTableElement] */

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

<h1 id="pageHeading">Table</h1>

<h2>Test</h2>

参考：

【讨论】：

成功了！谢谢:)