Dynamically changing the HTML of a div with jQuery is causing HTML encoding to be lost

Question

I have a piece of code which dynamically alters the HTML of a div called \'accordion\' on the fly like so:

// htmlstring contains some HTML containing some HTML          


        

Answer 1

When the HTML code is merged into the DOM, everything is canonicalized into the internal DOM representation, the original HTML coding is irrelevant. Apostrophe and ' are equivalent in HTML code, so they turn into the same thing in the DOM.

What you need to do is escape the inner apostrophe. htmlstring should contain:

Don't know

Issues like this are one of the reasons why inline Javascript in HTML elements is not recommended. It would be cleaner if you did something like:

$(".clickableComponent").click(function() {
    ComponentClicked('4612', "Don't know", '44761');
});