2

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.

Rory O'Kane
  • 29,210
  • 11
  • 96
  • 131
user2768957
  • 21
  • 2
  • also: http://stackoverflow.com/questions/355043/how-do-i-escape-an-ampersand-in-a-javascript-string-so-that-the-page-will-valida – ShinTakezou Sep 11 '13 at 14:03

2 Answers2

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.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Ok but if I use & instead of & the w3c validator tells me that I have to use & How can I generate correct HTML code using DOM? – user2768957 Sep 11 '13 at 14:00
  • @user2768957 — If the validator is telling you to use `&` then you are almost certainly using XHTML. See the link in the last paragraph of the answer. – Quentin Sep 11 '13 at 14:01
  • I'll try to be more clear. I'm using HTML 4 (strict.dtd) and Javascript in a separate file. No code in the HTML file. Code is for an exam and teachers will validate HTML using a bookmarklet (that extracts all the HTML code generated with DOM). This means that all the links that I create contain & and not & and this causes an error in W3C validator! – user2768957 Sep 11 '13 at 14:08
  • I tried to [reproduce the problem](http://dorward.me.uk/tmp/script_amp.html) you describe, but can't. The generated link contains `&` but the script contains `&`. – Quentin Sep 11 '13 at 14:16
  • Unfortunately the bookmarklet I must use contains this: var code = document.body.innerHTML.replace(/'); code is what they validate with w3c! If you try with that you'll see that the generated link shows as & and not & – user2768957 Sep 11 '13 at 14:27
  • @user2768957 — The test is broken. It is trying to create an HTML representation of the HTML source code serialised from the DOM, but it is failing to escape all the special characters. There is no way to have an ampersand in a URL in the input to that script and have it generate valid HTML. You need to raise this issue with the people performing the tests and get them to fix their script. – Quentin Sep 11 '13 at 14:31
0

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.

Community
  • 1
  • 1
Bucket
  • 7,415
  • 9
  • 35
  • 45