-1

I am retrieving some data from a database, which is returned as HTML like:

<p><strong>Hello</strong></p>
<p><strong>&nbsp;</strong><em>Hello</em></p>
<p><u>Hello</u></p>
<p>&nbsp;</p>
<p><span style="font-size:26px"><strong>Hello</strong></span></p>
<p><span style="font-size:26px"><strong>&nbsp;</strong><em>Hello</em></span></p>
<p><span style="font-size:26px"><u>Hello</u></span></p>

I want to use this data as child elements for an existing div - like so:

document.getElementById("news_id").append(data[0].story);

But it is returning the above data as plain text. How to proceed?

jonny
  • 3,022
  • 1
  • 17
  • 30
UMAR STACK
  • 13
  • 1

1 Answers1

2

As you said, the data you're retrieving is in plain text and it will be treated as such if you use the append method.

In order to render the HTML as HTML, use .innerHTML instead of .append, like so:

document.getElementById("news_id").innerHTML = data[0].story;

That should work. More info can be found at the MDN page for innerHTML.

jonny
  • 3,022
  • 1
  • 17
  • 30
  • There is so many duplicates for this, so "vote/flag to close as such" instead of answering. The built-in function for it, is there for a reason. – Asons Oct 04 '19 at 17:51