动态添加使用香草JS内容表

Question

我想尽可能多的行添加为我在我的数据库表的用户。我通过Ajax请求获得来自后端用户的信息，那么当响应（JSON）到我的代码把它传给我我会用underscore.js创建傻模板。

下划线呈现的模板后，这是我得到了什么：

<tr data-id="29">
    <td>[email protected]</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

我经常使用的模板文字为此，构建使用+=操作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 2

我在这里看到的问题是，你正在使用tbody.innerHTML = html;代替tbody.innerHTML += html;，当你使用+=操作符，你保留旧的HTML，如果你使用=更换旧的HTML与新的HTML

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

然后，我可以追加返回值喜欢和对待它喜欢它的对象。