将模板文字添加到 HTML 元素？ [复制]答案

【问题标题】：Adding template literal to HTML element? [duplicate]将模板文字添加到 HTML 元素？ [复制]
【发布时间】：2021-11-21 17:53:22
【问题描述】：

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> 像这样。

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

【问题讨论】：

newRow.innerHTML += (newbody); 像这样更新你的代码。
@Abdur-RehmanM 修改 innerHTML 会删除事件侦听器。最好改用insertAdjacentHTML。
感谢您对我的教育。 @Spectric
"但输出是将所有内容显示为..." - 正如预期的那样。至少在阅读了.append() 的文档之后

标签： javascript templates

【解决方案1】：

append 将插入DOMString 对象作为Text nodes，转义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>

【讨论】：