Convert string to HTML in JavaScript

Question

I have a string being sent to my JavaScript function from my C# code which has a text like:

 Hi <b>Welcome to C#<sup>5.0</sup></b>

I'm populating a div with this string. I need this html content to be rendered in the screen with the bold and superscript applied as below

Hi Welcome to C#^5.0

I tried the below it just displays the HTML tags as plain text

myfunction = function(data) {
  var mytext = '<div>'+ data +'</div>;
  $('#mydivid').after(mytext);
}

Is there any other solution neither like the one given here nor like this ?

Note: I cannot declare the string in a hidden variable in my .cshtml file within @HTML.Raw and again use it in my JavaScript.

I have tried using $.parseHTML but I got an error saying

$.parseHTML is not a function

Any solution other than the above solutions are welcome. Thanks in advance.

You've tagged this question as jquery, so why aren't you using the html() function? — Adrian Wragg
– Adrian Wragg, Commented Dec 21, 2016 at 11:54
you can directly replace this line var mytext = '<div>'+ data +'</div>; with razor syntax var mytext = '<div>'+ '@Html.Raw(data)' +'</div>; ... As you said I cannot declare the string in a hidden variable .. so with this syntax there is no need of variable — Rajshekar Reddy
– Rajshekar Reddy, Commented Dec 21, 2016 at 12:03
@RajshekarReddy are you telling me include Html.Raw in my .js file. Is that possible? No right? — Sethu Bala
– Sethu Bala, Commented Dec 21, 2016 at 12:08
@SethuBala but still there is a plugin which enables the power to use Razor syntax in .js file nuget.org/packages/RazorJS — Rajshekar Reddy
– Rajshekar Reddy, Commented Dec 21, 2016 at 12:10

selvakumar · Accepted Answer · 2016-12-22 08:58:11Z

3

seems like nothing is wrong with your code. Check if some css is overriding the basic em and sup functionality.

for Example the default style of em is font-style: italic which chould be override by your css

edited Dec 22, 2016 at 8:58

answered Dec 21, 2016 at 13:00

selvakumar

6547 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sethu Bala Over a year ago

Yeah! You were right. I had to override my css. Thank you :)

Komal · Accepted Answer · 2016-12-21 12:03:52Z

2

Try like this

myfunction = function(data) {
  $('#mydivid').html('<div>' + data + '</div>');
}

answered Dec 21, 2016 at 12:03

Komal

2,7364 gold badges26 silver badges33 bronze badges

3 Comments

Sethu Bala Over a year ago

This solution will work well for replacing .append() (sorry that was a late edit in my question) with .html() but in my case I'm using .after(). So what should I do for this case.

Komal Over a year ago

try like this $('#mydivid').after('<div>' + data + '</div>');

Sethu Bala Over a year ago

Tried but no improvement

Miguel Coder · Accepted Answer · 2016-12-21 12:44:21Z

1

You listed JQuery in your tags so I figured this would help.

html = $.parseHTML(  'Hi <b>Welcome to C#<sup>5.0</sup></b>' );

Check out this JSFiddle

You can also do this if you want a javascript oneliner.

document.getElementById("mydivid").innerHTML="Hi <b>Welcome to C#<sup>5.0</sup></b>";

edited Dec 21, 2016 at 12:44

answered Dec 21, 2016 at 11:59

Miguel Coder

1,95721 silver badges36 bronze badges

8 Comments

Sethu Bala Over a year ago

Tried this solution already and got error as "$.parseHTML is not a function"

Miguel Coder Over a year ago

Are you sure you have Jquery included in your scripts?

Sethu Bala Over a year ago

Yes. I'm pretty sure about that :)

Miguel Coder Over a year ago

What version are you running?

Sethu Bala Over a year ago

jQuery version "1.7.1"

|

Collectives™ on Stack Overflow

Convert string to HTML in JavaScript

3 Answers 3

1 Comment

3 Comments

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

8 Comments

Linked

Related