如何在模板文字上使用html标签？

Question

basically i want to print a list of the api but Im not sure if im using the template literal correctly

  <h6>XMLHttpRequest</h6>
  <ul class="testing"></ul>

html

var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
  if(xhr.readyState == 4){
    if(xhr.status == 200){
        var text = JSON.parse(xhr.responseText)
        document.getElementsByClassName('testing')[0].textContent =
        `<li>User id: ${text.userId}</li>
         <li>Title: ${text.title}</li>
        `;
    }
  }
}

var url = "https://jsonplaceholder.typicode.com/posts/1";

xhr.open('GET', url, true)
xhr.send()

I have a feeling i did the template literal wrong. I need guidance lol

<li>User id: 1</li> <li>Title: sunt aut facere repellat provident occaecati excepturi optio reprehenderit</li>

this is my output but i want it in a list format minus the tags lol

Answer 1

Use innerHTML instead of textContent :

 const xhr = new XMLHttpRequest() xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { const responseObj = JSON.parse(xhr.responseText) document.querySelector('.testing').innerHTML = `<li>User id: ${responseObj.userId}</li> <li>Title: ${responseObj.title}</li> `; } } } const url = "https://jsonplaceholder.typicode.com/posts/1"; xhr.open('GET', url) xhr.send() 

 <h6>XMLHttpRequest</h6> <ul class="testing"></ul>