使用 appendChild 或 innerHtml 的问题
Posted
技术标签:
【中文标题】使用 appendChild 或 innerHtml 的问题【英文标题】:Problem on using appendChild or 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 提供帮助? 【参考方案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
【讨论】:
以上是关于使用 appendChild 或 innerHtml 的问题的主要内容,如果未能解决你的问题,请参考以下文章
为啥 .html 工作而不是 innerHTML 或 appendChild
document.getElementById("test").value 和 document.getElementById("test").innerHTM
无法在 WCF Rest 中获取未定义或空引用的属性“appendChild”
Mutation Observer 不检测通过innerHTML、appendChild 添加的节点