Ampersand (& amp;) not escaping in DOM generated a href

Question

Here's my question. I need to create an a href = (..) using DOM and the href should contains some ampersand.

What I did:

 var anchor = document.createElement('a');   
     var link = "../php/page.php?id=100&mode=edit";  
     anchor.setAttribute("href", link);  
     parent.appendChild(anchor);

The problem I have is that when I try to click on the link the & amp; remains and it's not escaped to and as it should.

Answer 1

You are modifying a DOM using JavaScript, not creating one using HTML. JavaScript is not HTML. & in a JavaScript string literal means & not &. Just say &.

var link = "../php/page.php?id=100&mode=edit";

Note that if you are trying to use this in the body of a script element in an XHTML document the above isn't true (but if you serve the document as text/html then browsers will treat it as HTML and not XHTML). See the compatibility guidelines for more on this. I'd avoid the problem by not using XHTML, it adds complications but almost no developers will get any benefit from using it.

Answer 2

The & will not automatically be escaped when you set the href property of anchor in Javascript.

See this question for how to dynamically replace this string.