我正在尝试在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);
};
答案 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
试试这个:
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;
答案 3 :(得分:-1)
您可以尝试Jquery追加方法,如:
$(".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;
答案 4 :(得分:-2)
事实证明我无法附加此输入元素。删除此内容,只需添加&#39;元素&#39;就像我之前的作品一样。