如何正确使用模板字符串向HTML元素插入内容，避免被渲染为纯文本？

问题原因 #

原生DOM的append()方法传入字符串参数时，会自动将内容创建为文本节点，不会对HTML标签做解析，因此你写的<tr>等标签会直接以纯文本形式渲染出来。另外你原有代码中第一个<td>标签漏写了闭合斜杠，也可能导致后续渲染异常。

正确实现方式 #

方案1：使用insertAdjacentHTML插入（最适配你的场景） #

这个方法不会重绘整个tbody，不会破坏tbody内原有节点绑定的事件，写法也很简洁：

function addthis(){
    var title = document.getElementById("title").value;
    var desc = document.getElementById("desc").value;
    var tbody = document.querySelector('tbody');
    var newRow = `
    <tr>
        <td>${title}</td>
        <td>${desc}</td>
    </tr>`;
    // beforeend表示插入到tbody内部的末尾位置
    tbody.insertAdjacentHTML('beforeend', newRow);
}

方案2：使用innerHTML追加 #

适合简单无事件绑定的场景，注意这种方式会重绘整个tbody，原有节点绑定的事件会失效：

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

方案3：原生DOM节点创建（安全性最高） #

如果title、desc是用户可自由输入的内容，这种方式可以避免XSS注入风险：

function addthis(){
    var title = document.getElementById("title").value;
    var desc = document.getElementById("desc").value;
    var tbody = document.querySelector('tbody');
    // 创建行和单元格节点
    const tr = document.createElement('tr');
    const tdTitle = document.createElement('td');
    tdTitle.textContent = title;
    const tdDesc = document.createElement('td');
    tdDesc.textContent = desc;
    // 组装节点
    tr.append(tdTitle, tdDesc);
    tbody.append(tr);
}

内容的提问来源于stack exchange，提问作者DILIP KUMAR