是否将模板文字添加到HTML元素

Question

function addthis(){
var title=document.getElementById("title").value;
var desc=document.getElementById("desc").value;
var newRow=document.querySelector('tbody');
var newbody=`<tr>
<td>${title}<td>
<td>${desc}</td>
</tr>`;
newRow.append(newbody);
}

当用户单击"添加到列表"时，我试图添加新行，并在其中添加此内容，但输出是它将每个内容显示为<tr><td>hello<td><td>title</td></tr>，如下所示。

使用这个的正确方法应该是什么

Answer 1

append将插入DOMString对象作为Text节点，转义HTML。

改为使用insertAdjacentHTML：

function addthis() {
var title = document.getElementById("title").value;
var desc = document.getElementById("desc").value;
var newRow = document.querySelector('tbody');
var newbody = `<tr>
<td>${title}<td>
<td>${desc}</td>
</tr>`;
newRow.insertAdjacentHTML('beforeend', newbody);
}
addthis()

<input id="title" value="title">
<input id="desc" value="description">
<table>
<tbody></tbody>
</table>