CODEWITHSUNDEEP
javascriptjquerycss
Sean Anderson
Sean Anderson

Reputation: 29331

Struggling to figure out why appending raw HTML generates different result than creating HTML with jQuery

I have two jsFiddles:

The first jsFiddle shows code which takes HTML and appends it to my ul element. Note that the svg's 'X' icon appears.

I tried to rewrite this code using jQuery's element creation technique, but the path never shows up. If I replace the appending iconPath code with .text("Hello") I see Hello appear. I do not see any CSS differences between the two versions, though.

Could someone shed some light on what is going on?

Upvotes: 1

Views: 176

Answers (1)

user1269989
user1269989

Reputation: 117

it's parsed as HTML using the browser's innerHTML property. innerHTML can't parse SVG or other non-HTML content...

I guess this article will put some shadow on your questions. It has an example you are looking for. jquery's append not working with svg element?

Upvotes: 2

Related Questions