CODEWITHSUNDEEP
jquery
Stranger
Stranger

Reputation: 10631

Appending the html with quotes in JQuery

I'm appending some HTML tags when a user clicks on "like" in feeds section of my website. But it is breaking. I tried with lot of solutions available on the web, but I could not find the solution.

Here is the code I'm using:

$('#feed20').find('strong')
.append('<span original-title="<ul><li>
<a href="http://localhost/forex/profile/username">username</a>
</li></ul>" custom-style="view-more" class="tiply_html_click">1 more</span>');

Upvotes: 4

Views: 21370

Answers (6)

Lix
Lix

Reputation: 48006

You are having issues with your quotes. You wrapped a string with double quotes but then used a double quote in the string therefore terminating the string literal.

Try escaping the internal double quotes (\") like this - 

'<span original-title="<ul><li><a href=\"http://localhost/forex/profile/username\">username</a></li></ul>" custom-style="view-more" class="tiply_html_click">1 more</span>'

Upvotes: 2

Arsic Dragan
Arsic Dragan

Reputation: 61

You should use escaped single quotes for href.

$('#feed20').find('strong').append('<span original-title="<ul><li><a href=\'http://localhost/forex/profile/username\'>username</a></li></ul>" custom-style="view-more" class="tiply_html_click">1 more</span>');

Upvotes: 0

Mark
Mark

Reputation: 6864

You need to escape the double quotes that are used in the <a> href attribute

$('#feed20').find('strong').append('<span original-title="<ul><li><a href=\'http://localhost/forex/profile/username\'>username</a></li></ul>" custom-style="view-more" class="tiply_html_click">1 more</span>');

Upvotes: 1

Paul Aldred-Bann
Paul Aldred-Bann

Reputation: 6020

You need to escape your quotes, try this jsFiddle

$("#feed20").find("strong").append("<span original-title=\"<ul><li><a href='http://localhost/forex/profile/username'>username</a></li></ul>\" custom-style=\"view-more\" class=\"tiply_html_click\">1 more</span>");

​

Upvotes: 9

darma
darma

Reputation: 4747

Data in HTML attributes must be htmlentitized, try :

$('#feed20').find('strong').append('<span original-title="&lt;ul&gt;&lt;li&gt;&lt;a href=&quot;http://localhost/forex/profile/username&quot;&gt;username&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;" custom-style="view-more" class="tiply_html_click">1 more</span>');

Upvotes: 1

Steve
Steve

Reputation: 2997

From :

custom-style="view-more" class="tiply_html_click">1 more');

is wrong...

Upvotes: -2

Related Questions