JQuery Append Unexpected Token "<"

Question

I am using $.ajax to get content from a .php page which returns something similar to the following

<div class="item">
   <h1>Item Name</h1>
   <div class="content">
      <p>Content here</p>
   </div>
</div>

Here is my fetching code:

$.ajax(
{
   type: "GET",
   url: appletGet,
   data:
   {
      'name': this.name
    },
    success: function (data) 
    { 
       console.log(data.replace('\n', ''));
       $(element).append(data.replace('\n', ''));
    }
});

and I try to append it using

$(element).append(data);

but I get the error:

Uncaught SyntaxError: Unexpected token <

I look at some other posts and they all talked about the new lines causing the issue. Because of that, I attempted to remove new lines.

$(element).append(data.replace('\n', ''));

Which did not work. So, how do I go about fixing this?

Edit: Kepi gave an answer earlier which proposed that I use

$.parseHTML(data)

and then append that. He/She removed his/her answer due to second-guessing himself/herself. Since I do not think you can give credit when it is removed (I am correct right?) I am putting this solution here for future reference.

Kepi! Come get your credit!

HTML can be either upper, lower or mixed case, it's not a typo (unless it's XHTML, where it has to be lowercase). — David Thomas, Apr 19 '15 at 06:59
@UioShi I recommend making that line in your code multiple lines to have a easier debugging process. e.g. `$(element)`break`.append(`break`data.replace(`break`'\n', ''`break`)`break`);` Then see which line has the problem — Daniel Cheung, Apr 19 '15 at 07:00
can you post the code responsable for fetching the data? (the ajax call) — , Apr 19 '15 at 07:01
Which line? If you refer to me trying to remove the new lines, it was just so the error would go away according to the posts I read; that is since new lines cause the error I posed. — UioShi, Apr 19 '15 at 07:01
@UioShi I meant the code, so you might see where the problem originates. — Daniel Cheung, Apr 19 '15 at 07:02
Print `data` in your browser console before appending, and see what it gives. From the code you posted there's nothing wrong. — Leo, Apr 19 '15 at 07:05
k, this is just a guess, but maybe you are expecting a json back and there is a parsing issue, you should check the `dataType` for `$.ajax` — , Apr 19 '15 at 07:06
Hey guys! Don't hit on @Kepi, I did what he said and it actually got rid of the error and everything is working perfectly! — UioShi, Apr 19 '15 at 07:08
I want to give @Kepi credit, but his answer is no longer there. He proposed using $.parseHTML(data) which worked 100% for me. D: — UioShi, Apr 19 '15 at 07:11

score 0 · Answer 1 · edited Apr 19 '15 at 07:21

0

I don't see anything wrong here. Refer to this JSFiddle:

var data = '<div class="item">'+
   '<h1>Item Name</h1>'+
   '<div class="content">'+
      '<p>Content here</p>'+
   '</div>'+
'</div>';

$("body").append(data.replace("\n", ""));

Moreover if you are getting html response you may consider using $.load.

edited Apr 19 '15 at 07:21

Suhaib Janjua

3,538
16
59
73

answered Apr 19 '15 at 07:03

Anupam Basak

1,503
11
13

4

If you don't see anything wrong, how is this a solution? It should be a comment. – Barmar Apr 19 '15 at 07:04
Moreover, what for `.replace("\n", "")` is there? – Regent Apr 19 '15 at 07:05
I don't know why he tried to replace the `\n`s. @UioShi I need to see your code for ajax call and the actual response you are getting. – Anupam Basak Apr 19 '15 at 07:08

JQuery Append Unexpected Token "<"

1 Answers1