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, Oct 07 '12 at 12:11
I have to display as html, user should see the result in rendered html :) No tags at all! — Matteo Mosconi, Oct 07 '12 at 12:14
The code looks okay to me. Are you using
or tags by any chance? — TJ-, Oct 07 '12 at 12:15
Is the problem with #arguments or #post-content ? Does value[i].content come back html encoded? — Paul Fleming, Oct 07 '12 at 12:15
Is your html code is encoded means do it contains characters < > , etc.. — Anoop, Oct 07 '12 at 12:18
@flem I don't know if it's encoded, using console.log i see this as a sample content: <p> Hello!</p> — Matteo Mosconi, Oct 07 '12 at 12:21
That's you're problem. < in html is <. Therefore that's what you see. Update your PHP to return the original HTML. — Paul Fleming, Oct 07 '12 at 12:27

score 1 · Accepted Answer · edited May 23 '17 at 11:43

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 '17 at 11:43

Community

1
1

answered Oct 07 '12 at 12:29

Paul Fleming

24,238
8
76
113

score 0 · Answer 2 · edited May 23 '17 at 12:04

0

Your question is similar to this.

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

Escaping HTML strings with jQuery

edited May 23 '17 at 12:04

Community

1
1

answered Oct 07 '12 at 12:16

Loken Makwana

3,788
2
21
14

1

`text()` won't render html in DOM – charlietfl Oct 07 '12 at 12:18

Append ajax HTML string to the DOM using jQuery

2 Answers2