使用 appendChild 或 innerHtml 的问题答案

【问题标题】：Problem on using appendChild or innerHtml使用 appendChild 或 innerHtml 的问题
【发布时间】：2011-09-12 07:03:33
【问题描述】：

我想通过使用 javascript 而不是 jQuery 将我的 tr 和 td 附加到 tbody 中。目前我正在使用 jquery .html() 我想用 Javascript 更改它。

var arrStrData = [];

for (i = 0; i < objData.length; i++) {
    arrStrData.push("<tr>");
    arrStrData.push("<td>");
    arrStrData.push(objData[i].FirstName);
    arrStrData.push("</td>");
    arrStrData.push("<td>");
    arrStrData.push(objData[i].LastName);
    arrStrData.push("</td>");
    arrStrData.push("<td>");
    arrStrData.push(objData[i].Gender);
    arrStrData.push("</td>");
    arrStrData.push("<td>");
    arrStrData.push(objData[i].Country);
    arrStrData.push("</td>");
    arrStrData.push("<td>");
    arrStrData.push(objData[i].Password);
    arrStrData.push("</td>");
    arrStrData.push("</tr>");
}
$("tbody").html(arrStrData.join(''));

【问题讨论】：

表在哪里，id 是什么。请显示更多代码
如果您已经在使用 jQuery，为什么不希望 jQuery 提供帮助？

标签： javascript arrays innerhtml dom-manipulation

【解决方案1】：

作为对当前代码的最小更改，您可以按照以下方式进行：

var div = document.createElement('div');
div.innerHTML = '<table><tbody>' + arrStrData.join('') + '</tbody></table>';
var tbody = document.getElementsByTagName('tbody')[0];
tbody.parentNode.replaceChild(
  div.getElementsByTagName('tbody')[0], tbody
);

更通用的版本可能是：

var tbody = document.getElementsByTagName('tbody')[0];
var frag = document.createDocumentFragment();
var oRow = document.createElement('tr');
var oCell = document.createElement('td');
var propArray = ['FirstName','LastName','Gender',
                 'Country','Password'];
var row, cell, obj;

for (var i=0, iLen=objData.length; i<iLen; i++) {
  row = oRow.cloneNode(false);
  o = objData[i]

  for (var j=0, jLen=propArray.length; j<jLen; j++) {
    cell = oCell.cloneNode(false);
    cell.appendChild(document.createTextNode(o[propArray[j]]));
    row.appendChild(cell);
  }
  frag.appendChild(row);
}

tbody.appendChild(frag);

以上是您可以根据自己的情况进行调整的一般方法。

【讨论】：

【解决方案2】：

仅当只有一个 tbody 元素时才有效（就像您的 jQuery 示例一样）。

document.getElementsByTagName("tbody")[0].innerHTML=arrStrData.join('');

jsFiddle Demo

最好在table 或tbody 上定义id 并使用document.getElementById()。

【讨论】：

不要使用innerHTML修改表格，在很多浏览器中都会失败。

【解决方案3】：

有关使用本机 javascript 在表中实现 addRow 的信息，请参阅以下 URL。

http://www.mredkj.com/tutorials/tableaddrow.html

【讨论】：

【解决方案4】：

既然您已经在使用 jQuery，为什么不使用它 来帮助您，毕竟这就是它的用途。

var useKeys = ['FirstName', 'LastName', 'Gender', 'Country', 'Password'],
    html = '';

for (var i = 0; i < objData.length; i++) {
    var row = $(useKeys).map(function(value, key) {
        var value = objData[i][key];
        return '<td>' + (value == undefined ? '' : value) + '</td>';
    }).get();

    html += '<tr>' + row + '</tr>';
}

$('tbody').html(html);

Working fiddle

【讨论】：