尝试添加按钮，但获取"[object HTMLInputElement]"而不是按钮 [英] Attempting to add a button but getting "[object HTMLInputElement]" instead of the button

问题描述

我正在尝试在for循环中动态构建按钮，在该循环中，每次迭代都会构建一个按钮.我已经做完了，没问题，并从一个旧项目中复制了此代码.现在，我将 [object HTMLInputElement] 发布到了DOM而不是我的按钮.

I'm trying to build buttons dynamically in a for loop where each iteration builds a button. I've done this before no problem and copied this code from an old project. Now I get [object HTMLInputElement] posted to the DOM instead of my button.

有什么建议吗?谢谢.

到目前为止我所拥有的:

What I have so far:

var element = document.createElement("input");
element.className = 'appointmentClass'
element.id = countAppointments;
element.type = 'button';
element.name = 'name';
element.value = 'remove';
element.onclick = function () {
        alert('removed appointment '+ this.id)
//      addShow(this.id);
};

推荐答案

执行时

tableRow.append("<td>" + element + "</td>"); 

您正在导致浏览器引擎在DOM节点上调用toString()，从而得到所看到的内容.您需要创建一个td元素并将该按钮附加到TD元素.然后将td附加到tr.

You are causing the browser engine to call toString() on the DOM node which results in what you are seeing. You need to create a td element and append the button to the TD element. and than append the td to the tr.

纯JS

var td = document.createElement("td");
td.appendChild(element);
tableRow.appendChild(td);  //or     tableRow.append(td);

或使用jQuery

var td = $("<td></td>");
td.append(element);
tableRow.append("td"); 

这篇关于尝试添加按钮，但获取"[object HTMLInputElement]"而不是按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！