createDocumentFragment Beispiel

[MudGuard]

Hi,

<main id="main">
  <table id="personen">
    <thead>
       <tr>
         <th>Name</th><th>Vorname</th><th>Geburtsdatum</th>
       </tr>
    </thead>
    <tbody/>
  </table>
  <button id="addPerson">Neue Person</button>
</main>

// addPersonenRow ?
function addPersonRow() {
    const fragment = new DocumentFragment
    const row = fragment.appendChild(document.createElement('tr'))

    row.innerHTML = `
        <td headers="lastname">
            <input aria-labelledby="lastname">
        </td>
        <td headers="firstname">
            <input aria-labelledby="firstname">
        </td>
        <td headers="birthdate">
            <input aria-labelledby="birthdate">
        </td>
    `

    const table = document.querySelector('[aria-label=Personen]')
    table.appendChild(fragment)
}

egal, wie das Fragment (ne Tabellenzeile) zusammengeschraubt wird, die gehört nicht als Kind an die table, sondern als Enkel - mit dem tbody als Elternteil.

cu,
Andreas a/k/a MudGuard