以下代码生成一个网站，让用户有机会输入一个 ingredient 与相应 amount 的输入字段）。
在用户按下 add 按键 ingredient 和 amount 显示在一个表格中。此外，新增行的第三个单元格应该是一个 移除按钮.
提供的代码中，目前唯一不能使用的部分是创建删除按钮。我是一个超级新手，对web开发，对手把库也很陌生。
我的问题是如何在使用手柄库时正确显示按钮？ 目前，没有实际的按钮 [object HTMLButtonElement] 得到显示。我相信这是可能的，但我找不到正确的方法。
代码。
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<script id="result" type="text/template">
<tr>
<td> {{ ingredient }} </td>
<td> {{ amount }} </td>
<td> {{ change }} </td>
</tr>
</script>
<script>
const template = Handlebars.compile(document.querySelector('#result').innerHTML);
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#add').onclick = () => {
// create the remove button (HERE IT GOES WRONG)
const btn = document.createElement("BUTTON");
btn.innerHTML = "remove element";
btn.className = "remove";
// get the inputs
const ingredient = document.querySelector('#ingredient').value;
const amount = document.querySelector('#amount').value;
const content = template({'ingredient': ingredient, 'amount': amount, 'change': btn});
document.querySelector('#tab').innerHTML += content;
};
});
</script>
</head>
<body>
<input type="text" id="ingredient">
<input type="text" id="amount">
<button id="add">Add</button>
<table id="tab">
<tr>
<th>Ingredient:</th>
<th>Amount:</th>
<th>Change:</th>
</tr>
</table>
</body>
</html>
我很感激你的帮助。
你混合了两种不同的方式向DOM中添加内容。第一种是使用Handlebars将一个HTML模板String编译成一个函数，当传递一个数据上下文Object时，该函数将返回一个插值的HTML字符串。第二种是使用 document.createElement 来创建DOM节点，这些节点将通过DOM方法直接插入到DOM中，如 .appendChild().
该 btn 你正在创建的变量将被分配给它的结果是 document.createElement("BUTTON")，这是一个 HTML按钮元素 对象。当您将此对象传递给您的编译模板函数时，Handlebars只知道尝试将其字符串化，以便使其成为渲染输出的一部分。当这个Object被字符串化时，它会产生"[对象HTMLButtonElement]"。
您可以做一些不愉快的工作来获取按钮元素的渲染 HTML 字符串，并将其传递给您的模板函数，但更好的做法是将 HTML 化留给模板。
这将意味着删除您所有的 const btn 代码，并在您的模板中用所需的HTML替换该变量。
因此。
<td> {{ change }} </td>
就变成了。
<td><button class="remove">remove element</button></td>
当然，下一个棘手的部分是如何将点击处理程序绑定到这些动态添加的按钮上；但这不在本问题的范围内。