Appending HTML content via jQuery

Question

I have a page where I load comments on demand by using jQuery. I have <div id="comments"> where I append HTML by formatting a predefined template.

My template is as follows : <div class="entry clearfix" style="position: absolute; left: 1oopx; top: 20px;"> <div class="comment-image"> <img class="image_fade" src="<#ImageUri#>" alt="<#Header#>"> </div> <div class="entry-title"> <h2><a href="/Blog/Coments/<#Uri#>"><#Header#></a></h2> </div> <ul class="entry-meta clearfix"> <li><i class="icon-calendar3"></i> <#CommentDate#></li> <li><i class="icon-user"> <#Handle#></i></li> </ul> <div class="entry-content"> <#Body#> </div> </div>;

I use a jQuery GET to get comment content then I replace the content as follows :

html += blogitemHtml .replace(/<#ImageUri#>/g, item.ImageUri) .replace(/<#Header#>/g, item.Header) .replace(/<#Uri#>/g, item.FriendlyUri) .replace(/<#CommenDate#>/g, item.PublishedOn) .replace(/<#Handle#>/g, item.Handle) .replace(/<#Body#>/g, item.Intro);

$("#comments").append(html);

The problem is data in Body is also and HTML document with tags. So instead of a formatted text I see HTML tags instead.

I know I could use the jQuery html() function but it changes the content of the div, where I want to append new content.

How can I possibly add the content and displayed it in a formatted way as the HTML tags should.

Example I should see:

This is my first comment. And I would like to thank you with this video

Bu instead I see : <p> This is my <b>first</b> comment. And I would like to thank you with this <a href="https://youtube.com">video</a>.

Answer 1

Try using parseHTML() to parse the string into into an array of DOM nodes.

var htmlNodes = $.parseHTML( html);
$("#comments").append(htmlNodes );