Append ajax HTML string to the DOM using jQuery

Question

My script receives some data from a PHP page. One item called "content" contains HTML code. I have to put my HTML code in a div but unfortunately, it is appended as plain text. How can I append it to the DOM as real HTML? This is my jQuery code:

      $.ajax({
      'url': 'ajaxdashboard.php',
      dataType: 'json',
      cache: false,
      success: function (json) {
          $.each(json, function (key, value) {
              for (i = 0; i < value.length; i++) {
                  $('#arguments').append('<div class="well student" style="display: none;" id="post-' + value[i].id + '"><h3>' + value[i].title + '</h3><span>Published by <font color="blue"><b>' + value[i].name + ' ' + value[i].surname + '</b></font></span><br><br><span id="post-content-' + value[i].id + '"></span></div>');
                  $('#post-content-' + value[i].id).html(value[i].content);
                  $('#post-' + value[i].id).fadeIn();
              }
          });
      }
  });

This is a little ambiguous to me. Are you trying to display the returned content as HTML (i.e. the user will see the tags)? Or do you want to render the HTML? — Paul Fleming
– Paul Fleming, Commented Oct 7, 2012 at 12:11
I have to display as html, user should see the result in rendered html :) No tags at all! — Matteo Mosconi
– Matteo Mosconi, Commented Oct 7, 2012 at 12:14
The code looks okay to me. Are you using <pre> or <code> tags by any chance? — TJ-
– TJ-, Commented Oct 7, 2012 at 12:15
Is the problem with #arguments or #post-content ? Does value[i].content come back html encoded? — Paul Fleming
– Paul Fleming, Commented Oct 7, 2012 at 12:15
Is your html code is encoded means do it contains characters < > &#32, etc.. — Anoop
– Anoop, Commented Oct 7, 2012 at 12:18

Community · Accepted Answer · 2017-05-23 11:43:12Z

1

You're problem is that the PHP is returning encoded html. < in html is <. Therefore that's what the user will see.

Update your PHP to return the original HTML. Otherwise you can cheat it with jQuery something like this:

$('#post-content-' + value[i].id).html($(value[i].content).text());

Source for decoding html.

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered Oct 7, 2012 at 12:29

Paul Fleming

24.6k8 gold badges79 silver badges113 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:04:40Z

0

Your question is similar to this.

use text() instead of html() that escapes automatically.

Escaping HTML strings with jQuery

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered Oct 7, 2012 at 12:16

Loken Makwana

3,8482 gold badges23 silver badges14 bronze badges

1 Comment

charlietfl Over a year ago

text() won't render html in DOM

Collectives™ on Stack Overflow

Append ajax HTML string to the DOM using jQuery

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related