insertAdjacentHTML not working with created element

Question

I want to display a table after an h1 with an id of pageHeading . The HTML for the h1 is hardcoded: <h1 id="pageHeading">Table</h1>

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

The table is created with Javascript:

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

I tried the following:

document.body.appendChild(table)

This prints the table but after the last HTML element on the page.

Then I tried:

tableHeading.appendChild(table)

This prints the table but INSIDE the h1 .

Finally, I tried:

pageHeading.insertAdjacentHTML(
  "afterend",
  table
)

This doesn't print the table at all. Instead I get (after the h1 ):

[object HTMLTableElement]

Could this be because I'm using .insertAdjacentHTML on the table contents (see full code below)?

 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>

Answer 1

Instead of use insertAdjacentHTML you need insertAdjacentElement because is a element not an html string like:

 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>

Reference:

• insertAdjacentHTML
• insertAdjacentElement