Adding template literal to HTML element?

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);
    }

I was trying to add new row and inside that this content when user click on add to list but the output is its showing every content as <tr><td>hello<td><td>title</td></tr> like this.

what should be the right way to use this

`newRow.innerHTML += (newbody);` update your code like this. — Abdur-Rehman M, Nov 21 '21 at 17:59
@Abdur-RehmanM Modifying `innerHTML` removes event listeners. Better to use `insertAdjacentHTML` instead. — Spectric, Nov 21 '21 at 17:59
_"but the output is its showing every content as..."_ - As expected. At least after reading the documentation for `.append()` — Andreas, Nov 21 '21 at 18:07

Spectric · Accepted Answer · 2021-11-21T18:02:17.377

append will insert DOMString objects as Text nodes, escaping the HTML.

Use insertAdjacentHTML instead:

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>

Adding template literal to HTML element?

1 Answers1