Question

关于js的innerHTML赋值问题，代码如下：

document.getElementById("personList").innerHTML="<tr><td>关羽(云长)</td></tr>";
alert(document.getElementById("personList").innerHTML);
为什么弹出的是"关羽(云长)</td></tr>"，而不是"<tr><td>关羽(云长)</td></tr>"呢？
我是做ajax分页用到的，表头像“<table><th>姓名</th><div id="personList"></div></table>”这样的标签是固定写在页面上的，中间的一行记录想用dom动态渲染上去，请问具体该怎么解决？谢谢

Answer 1

不是有效的完整标签。
<table><tr><td>关羽(云长)</td></tr></table>;
<div>关羽(云长)</div>;
Dom:
function insertTr() {
var tablenode = document.getElementById("table");
//创建
var NewTr = document.createElement("tr");
var NewTd = document.createElement("td");
var NewDiv = document.createElement("Div");
//追加一个新的子结点
NewDiv.id="personList";
NewDiv.innerHTML="关羽(云长)";
NewDiv .appendChild(NewDiv);
NewTr.appendChild(NewTd);
//追加一个新的结点
tablenode.appendChild(NewTr);
}
</script>

Answer 2

这句有问题：<table><th>姓名</th><div id="personList"></div></table>
<div>不在<table>有效的标签(容器)里面，按道理来说<div></div>里面的东西都显示不出来的。要把<div>放到容器里（innerHTML对象无法给自己添加容器）。
改成这样：
document.getElementById("personList").innerHTML="关羽(云长)";
<table><th>姓名</th><th><div id="personList"></div></th></table>