insertAdjacentHTML не работает с созданным элементом

#javascript #html #insertadjacenthtml

#javascript #HTML #insertadjacenthtml

Вопрос:

Я хочу отобразить a table после an h1 с идентификатором pageHeading . HTML для h1 жестко запрограммирован: <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 но ВНУТРИ h1 .

Наконец, я попробовал:

 pageHeading.insertAdjacentHTML(
  "afterend",
  table
)

При этом таблица вообще не печатается. Вместо этого я получаю (после h1 ):

 [object HTMLTableElement]

Может ли это быть потому, что я использую .insertAdjacentHTML table содержимое (см. Полный код ниже)?

 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>

Развернуть фрагмент

Ответ №1:

Вместо того, чтобы использовать insertAdjacentHTML , который вам нужен insertAdjacentElement , потому что это элемент, а не строка 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>

Развернуть фрагмент

Ссылка: