Javascript 创建的元素显示为未定义的对象

我正在尝试创建一个删除按钮，将其放在表的最后一个单元格中。但当我尝试时，它显示的是对象定义（[object HtmlButtoneElement]），而不是它应该生成的HTML元素。是否必须以某种方式将其追加到表行？既然我只是在循环中创建普通的HTML标记，我该怎么做呢

当我在控制台中尝试该方法时，它会生成我所期望的元素

此外，它还在开始的“table”标记后面添加“undefined”。看起来有点奇怪

var视图={
//它应该能够显示工作人员
displayStaff:函数（）{
var staffTable=document.getElementById（“staffInfo”）；
staffTable.innerHTML=“”；
staffTable.innerHTML=“员工姓名电话号码员工号码部门资历邮件地址雇佣状态操作”
+this.listStaffProps（）+“”；
},
listStaffProps:function（）{
var staffList；
用于（rotaOb.staff中的var道具）{
staffList+=''+rotaOb.staff[props]。staff\u fName+''+rotaOb.staff[props]。staff\u sName
+“+rotaOb.staff[道具].员工编号
+“+rotaOb.staff[道具]。staff\u staffN
+“+rotaOb.staff[道具].员工部
+“+rotaOb.staff[道具]。staff\U资历
+“”+rotaOb.staff[道具].staff\u sEmail
+“+rotaOb.staff[道具].全职员工
+“”+this.deleteStaffButton（）
+ "";
};
返回staffList；
},
deleteStaffButton:函数（）{
var deleteStaffButton=document.createElement（“按钮”）；
deleteStaffButton.textContent=“删除”；
deleteStaffButton.className=“deleteStaffButton”；
返回deleteStaffButton；
}
};

您可以更改

deleteStaffButton

功能，也可以更改将按钮添加到表中的方式

最简单的更改是修改函数（但是您没有直接添加函数的灵活性），因此它返回HTML字符串

deleteStaffButton: function() {
  return '<button class="deleteStaffButton">Delete</button>';
}

deleteStaffButton:function（）{
返回“删除”；
}

尝试使用字符串，因为您正在解析HTML

var deleteStaffButton=“删除”

并将var添加到：

 + "</td><td>" + deleteStaffButton  

+“”+deleteStaffButton

或者简单地说：

+“删除”

因为它不会改变

片段

var视图={
//它应该能够显示工作人员
displayStaff:函数（）{
var staffTable=document.getElementById（“staffInfo”）；
staffTable.innerHTML=“”；
staffTable.innerHTML=“员工姓名电话号码员工号码部门资历邮件地址雇佣状态操作”
+this.listStaffProps（）+“”；
},
listStaffProps:function（）{
var staffList；
用于（rotaOb.staff中的var道具）{
staffList+=''+rotaOb.staff[props]。staff\u fName+''+rotaOb.staff[props]。staff\u sName
+“+rotaOb.staff[道具].员工编号
+“+rotaOb.staff[道具]。staff\u staffN
+“+rotaOb.staff[道具].员工部
+“+rotaOb.staff[道具]。staff\U资历
+“”+rotaOb.staff[道具].staff\u sEmail
+“+rotaOb.staff[道具].全职员工
+“”+deleteStaffButton
+ "";
};
返回staffList；
},
var deleteStaffButton=“删除”
}
};初始化
statfflist
，
var statfflist=“”！否则，您将在存储在
staffList
中的HTML前面添加一个
“未定义”
。您好，刚刚尝试过，仍然无法工作：（您混合了文本创建和对象创建-您应该选择毒药，或者不要尝试将对象附加到字符串。
document.createElement（）
返回一个对象，如果您尝试将其添加到字符串的后面，可以使用
{element}.appendChild（）
正如@wizebin所说，更改最后一个函数，使其返回HTML字符串而不是节点！如果没有所需的所有代码，这有点难以排除故障什么是rotaOb？ReferenceError：rotaOb没有定义。div staffInfo在哪里？这是另一个错误
 + "</td><td>" + deleteStaffButton  

 + "</td><td><button class='deleteStaffButton'>Delete</button></td></tr>"

var deleteStaffButton = document.createElement("BUTTON");
var text = deleteStaffButton.textContent = "Delete";
deleteStaffButton.appendChild(text);