使用 Vanilla JS 向表格动态添加内容

Question

我正在尝试将与数据库中的用户一样多的行添加到表中。我通过 ajax 请求从后端获取用户信息，然后当响应 (JSON) 到达时，我的代码将其传递给我使用 underscore.js 创建的愚蠢模板。

在下划线渲染模板后，这是我得到的：

<tr data-id="29">
    <td>email@themail.ma</td>

    <td>
        <ul style="display:inline-block; padding-left:0; margin-bottom:0">
            <li style="display:inline-block;"><a href="#"></a></li>
        </ul>
    </td>

    <td>Activo</td>

    <td>No caduca</td>

    <td>
        <span data-placement="left" data-toggle="tooltip" title="Eliminar usuario">
            <a class="icon-trash" href="#" role="button"
               data-toggle="modal"
               data-target="#js-confirm-modal"
               data-action="js-del-user"
               data-msg="Desea eliminar el usuario?"></a>
        </span>

        <span data-placement="left" data-toggle="tooltip" title="Cambiar contraseña">
            <a class="icon-key" href="#" role="button"
               data-toggle="modal"
               data-target="#js-confirm-modal"
               data-action="js-chg-pass"
               data-msg="Cambiar contraseña del usuario?"></a>
        </span>

        <span data-placement="left" data-toggle="tooltip" title="Bloquear usuario">
            <a class="icon-lock" href="#" role="button"
               data-toggle="modal"
               data-target="#js-confirm-modal"
               data-action="js-block-user"
               data-msg="Desea bloquear el usuario?"></a>
        </span>

        <span data-placement="left" data-toggle="tooltip" title="Desbloquear usuario">
            <a class="icon-lock-open" href="#" role="button"
               data-toggle="modal"
               data-target="#js-confirm-modal"
               data-action="js-unblock-user"
               data-msg="Desea desbloquear el usuario?"></a>
        </span>

    </td>
</tr>

到目前为止一切都很好，但是当我做这样的事情时：

tbody.innerHTML = html;

// or 

let parseHTML = function(str) {
  var tmp = document.implementation.createHTMLDocument();
  tmp.body.innerHTML = str;
  return tmp.body.children;
};

parseHTML(html);  // and then adding the returned codes to my tbody

它只是失去了 html 表格格式（td、tr 标签等）

Answer 1

我在这里看到的问题是您使用tbody.innerHTML = html; 而不是tbody.innerHTML += html;，当您使用+= 运算符时，您会保留旧的HTML，如果您使用=，则将旧的HTML 替换为新的HTML

Answer 2

我经常为此使用模板文字，使用+= 运算符构造一个长的HTML 字符串，然后使用document.innerHTML 将最终的HTML 字符串附加到我的页面。

一个简单的例子可能如下所示：

const helloWorlds = {
  spanish: '¡Hola Mundo!',
  polish: 'Witaj świecie!',
  french: 'Bonjour le monde!'
}

const helloWorldsKeys = Object.keys(helloWorlds);

let listMarkup = '';

for (let i = 0; i < helloWorldsKeys.length; i++) {
  listMarkup += '<li class="listItem">' + helloWorlds[helloWorldsKeys[i]] + '</li>';
}

const myList = document.getElementById("list");

myList.innerHTML = listMarkup;

<div>
  <h1>Hello World!</h1>
  <ul id="list"></ul>
</div>

当然，你也可以在客户端使用appendChild逐位构造列表，而不是一次性添加整个列表。这可能看起来像：

const myList = document.getElementById("list");

const helloWorlds = {
  spanish: '¡Hola Mundo!',
  polish: 'Witaj świecie!',
  french: 'Bonjour le monde!'
}

const helloWorldsKeys = Object.keys(helloWorlds);

for (let i = 0; i < helloWorldsKeys.length; i++) {
  let listItem = document.createElement('li');
  listItem.classList.add('listItem');
  listItem.innerHTML = helloWorlds[helloWorldsKeys[i]];
  myList.appendChild(listItem);
  
}

<div>
  <h1>Hello World!</h1>
  <ul id="list"></ul>
</div>

这是一个使用表格的示例：

const myTableBody = document.getElementById("my-table-body");

const helloWorlds = {
  spanish: '¡Hola Mundo!',
  polish: 'Witaj świecie!',
  french: 'Bonjour le monde!'
}

const helloWorldsKeys = Object.keys(helloWorlds);

for (let i = 0; i < helloWorldsKeys.length; i++) {

  // create a table row element
  let tableRow = document.createElement('tr');

  // create a table cell (td) element
  let listItem = document.createElement('td');
  listItem.classList.add('listItem');

  // add content to table cell element
  listItem.innerHTML = helloWorlds[helloWorldsKeys[i]];

  // append table cell to table row
  tableRow.appendChild(listItem);

  // append table row to table body
  myTableBody.appendChild(tableRow);
}

<table border="1">
  <thead>
    <td>Hello World!</td>
  </thead>
  <tbody id="my-table-body"></tbody>
</table>

关于您的特定应用程序，如果您想探索创建 HTML 文档并将其内容附加到其他 HTMl 文档，请查看此答案：Cannot append DOM element to DIV node: Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node'

Answer 3

感谢@jaredgorski，我意识到为什么 html 代码会丢失格式，所以这是迄今为止最适合我的问题的解决方案。任何建议将不胜感激。

function convert2Element (strHTML) {
    let table = document.createElement('table');
    table.appendChild(document.createElement('tbody'));
    table.querySelector('tbody').innerHTML = strHTML;
    return table.querySelector('tbody tr');
}

然后我可以附加返回的值并将其视为对象。