CODEWITHSUNDEEP
javascripthtmlcss
user11891640
user11891640

Reputation:

How to html tags on template literals?

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

Upvotes: 0

Views: 63

Answers (1)

Snow
Snow

Reputation: 4097

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>

Upvotes: 0

Related Questions