inserting new tags with class names in Javascript innerText?

Viewed 27

I made a forEach case for text loop, and this moment, I;m facing a problem that I cannot put span tag in return result of innerText.

data.forEach(item => {
  const dataTitle = document.createElement('p');
  dataTitle.innerText = data.title + '<span class="p-90">' + data.subTitle + '</span>'
  viewContainer.appendChild(dataTitle);
});

this is my code, but the < span class =".... is exposed to the site in raw. how can I fix it?

1 Answers

Try this. use innerHTML instead of innerText and replace data.title with item.title. same for data.subTitle.

data.forEach((item) => {
      const dataTitle = document.createElement("p");
      dataTitle.innerHTML =
        item.title + '<span class="p-90">' + item.subTitle + "</span>";
        viewContainer.appendChild(dataTitle);
    });
Related