尝试添加按钮但获取“[object HTMLInputElement]”而不是按钮

时间:2016-01-07 04:05:19

标签: javascript button

我正在尝试在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);
};

5 个答案:

答案 0 :(得分:1)

你只需要使用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 );

答案 1 :(得分: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 :(得分:0)

您没有将DOM element追加到任何地方。您可以使用parentNode.appendChild方法接受参数node

试试这个:

&#13;
&#13;
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);
}
&#13;
<div id="conteiner"></div>
&#13;
&#13;
&#13;

Fiddle here

答案 3 :(得分:-1)

您可以尝试Jquery追加方法,如:

&#13;
&#13;
$(".container").append("<input type="button" value="XXXX" name="XXXX" id="XXXXX">");
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
&#13;
&#13;
&#13;

答案 4 :(得分:-2)

事实证明我无法附加此输入元素。删除此内容,只需添加&#39;元素&#39;就像我之前的作品一样。