CODEWITHSUNDEEP
javascripthtml
kishore
kishore

Reputation: 727

How to convert html string as html dom element?

I have a webservice that returns html string as response. I want to display the response in a div element. The response I am getting from service is

<span style="text-indent: 29px;padding-top:35px;font-size: 16pt;font-family: Arial;color: #FFFFFF;font-weight: bold;position: absolute;text-decoration: none;">89</span>
<span style="text-indent: 41px;padding-top: 58px;font-size: 8pt;letter-spacing: 1px;font-family: Arial;color: #E5DA95;font-weight: bold;position: absolute;text-decoration: none">89</span>
<span style="text-indent: 55px;padding-top: 58px;font-size: 8pt;letter-spacing: 1px;font-family: Arial;color: #E5DA95;font-weight: bold;position: absolute;text-decoration: none">-</span>
<span style="text-indent: 59px;padding-top: 58px;font-size: 8pt;letter-spacing: 1px;font-family: Arial;color: #E5DA95;font-weight: bold;position: absolute;text-decoration: none">92</span>
<img src="https://www.autocheck.com/members/img/freeLinkScore/scoreBanner4.gif" height="75" width="75" border="0">

I used the statement div.innerHTML = response;

The response is getting displayed as text instead of HTML. Can someone please tell me how to display the response as html inside the div.

Upvotes: 2

Views: 1294

Answers (4)

Christophe
Christophe

Reputation: 28174

You could do this in two steps:

div.innerHTML = response;
var htmlstring=div.innerText||div.textContent;
div.innerHTML=htmlstring;

Upvotes: 0

Brock Adams
Brock Adams

Reputation: 93613

If that's your webservice, change its to output an un-HTML-encoded response.

Otherwise you will have to HTML decode the response before setting it as content. I looked for a lightweight decoder and couldn't find one that was more robust than simple regex.

So, this will probably work for your immediate needs, just beware that it can break on certain combinations of content (which seem unlikely in this case).

response = response.replace (/&lt;/ig, '<').replace (/&gt;/ig, '>');

.
PS: Be sure that this webserver can't supply you with malicious html, like <script> tags.

Upvotes: 1

Ben
Ben

Reputation: 784

Setting your div.innerHTML to something like

<span style="text-indent: 29px;padding-top:35px;font-size: 16pt;font-family: Arial;color: #FFFFFF;font-weight: bold;position: absolute;text-decoration: none;">89</span>

isn't going to work because that text isn't html encoded, so javascript is treating the quotes like escape sequences. If it was html encoded you would see &quot; in place of the quotes. To encode it you should be able to use the Server.HtmlEncode method.

Upvotes: 0

Nathan Ridley
Nathan Ridley

Reputation: 34426

setting the innerHTML property of an element does not cause that content to be encoded; it's purpose is specifically for getting and setting the HTML inside an element.

If the response is being html encoded, double check the actual response text you're getting from the server and make sure it's not being encoded on the server side. The response you're seeing may simply be an HTML-rendered version of the text, which would explain how you're seeing triangle brackets instead of the actual html encoded text.

Upvotes: 1

Related Questions