尝试添加按钮但得到“[object HTMLInputElement]”而不是按钮答案

【问题标题】：Attempting to add a button but getting "[object HTMLInputElement]" instead of the button尝试添加按钮但得到“[object HTMLInputElement]”而不是按钮
【发布时间】：2016-01-07 04:05:18
【问题描述】：

我正在尝试在 for 循环中动态构建按钮，每次迭代都会构建一个按钮。我之前已经完成了这一切，并从一个旧项目中复制了这段代码。现在我将 [object HTMLInputElement] 发布到 DOM 而不是我的按钮。

有什么建议吗？谢谢。

到目前为止我所拥有的：

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);
};

【问题讨论】：

那么你是如何将元素添加到页面的呢？那是错误...
如何将节点添加到 DOM？此代码只创建一个节点，但不渲染它。
抱歉忘记了这些家伙，我这样追加：tableRow.append("" + element + "");它将上面列出的对象数据附加到 DOM

标签： javascript button

【解决方案1】：

当你这样做时

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

您正在导致浏览器引擎在 DOM 节点上调用 toString()，这会导致您看到的结果。您需要创建一个 td 元素并将按钮附加到 TD 元素。而不是将 td 附加到 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");

【讨论】：

【解决方案2】：

您只需使用parentElement.appendChild(element) 将按钮附加到正文

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);
}

document.body.appendChild( element );

【讨论】：

【解决方案3】：

您没有在任何地方附加DOM element。您可以使用parentNode.appendChild 方法，该方法接受参数作为node

试试这个：

var parent = document.getElementById('conteiner');
for (var i = 0; i < 10; i++) {
  var
    element = document.createElement("input");
  element.className = 'appointmentClass'
  element.id = 'countAppointments' + i;
  element.type = 'button';
  element.name = 'name';
  element.value = 'remove';
  element.onclick = function() {
    alert(this.id);
    this.parentNode.removeChild(this);
  };
  parent.appendChild(element);
}

&lt;div id="conteiner"&gt;&lt;/div&gt;

Fiddle here

【讨论】：

【解决方案4】：

您可以尝试 Jquery append 方法，例如：

$(".container").append("&lt;input type="button" value="XXXX" name="XXXX" id="XXXXX"&gt;");

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

我实际上是使用jquery来追加的，$('#apptable').append(tableRow); tableRow.append("" + 元素 + "");

【解决方案5】：

事实证明我不能为这个输入元素追加。删除它并像以前一样添加“元素”。

【讨论】：

不可能不附加input 元素。检查控制台是否有错误。在提供的代码中countAppointments 未定义..
这应该是一条评论。