使用jQuery动态更改div的HTML会导致HTML编码丢失

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 encoding
// e.g. <span class='clickableComponent component' onclick="ComponentClicked('4612', 'Don&#39;t know', '44761');">Don't know</span>
$('#accordion').html(htmlstring);

However, after the HTML for the element 'accordion' is set, upon inspecting the HTML of the div via FireBug (or other developer tool) the encoded apostrophe is lost and is instead replaced by an apostrophe which is un-encoded. The encoding seems to get lost in the .html method.

I've tried using assigning the HTML using the .innerHtml method instead, but the same thing happens.

Does anybody have any ideas as to why this is happening?

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:

<span class='clickableComponent component' onclick="ComponentClicked('4612', 'Don\'t know', '44761');">Don't know</span>

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');
});

Answer 2

Try using the javascript escape \\'

Here's an excerpt from the jQuery docs that explains why your HTML escape character is being rendered:

By design, any jQuery constructor or method that accepts an HTML string — jQuery(), .append(), .after(), etc. — can potentially execute code. This can occur by injection of script tags or use of HTML attributes that execute code (for example, ). Do not use these methods to insert strings obtained from untrusted sources such as URL query parameters, cookies, or form inputs. Doing so can introduce cross-site-scripting (XSS) vulnerabilities. Remove or escape any user input before adding content to the document.

Answer 3

Check this link: HTML-encoding lost when attribute read from input field

you can use the function that Anentropic write.

function htmlEscape(str) {
    return String(str)
            .replace(/&/g, '&')
            .replace(/"/g, '"')
            .replace(/'/g, ''')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
}

Answer 4

Thanks go to Barmar for providing the first correct answer. In actual fact I refactored my code so that I wasn't passing complicated strings via a method parameter, but my you did answer my initial query correctly.

Thanks to other comments for your input too.