Firefox innerHTML Error?
I have a simple HTML snippet
<p id="skills">Skills</p> in Firefox 3.6.3 when I call (using jQuery):
$("#skills")[0].innerHTML = "some new text" Firefox displays it as
<p id="skills"><a xmlns="http://www.w3.org/1999/xhtml">some new text</a></p> Where in the world is this link coming from
(note that the same thing happens when calling $("#skills").html("some new text") with jQuery)
It turns out my sample code excludes the part that is the real problem, here is the example work page to show the problem. When you change the html of any element in a link, it wraps all the text with<a xmlns="http://www.w3.org/1999/xhtml">THE TEXT</a>
In my demo, when you click the test link, it will replace the html within the skills:
<a xmlns="http://www.w3.org/1999/xhtml">some new text</a> This may not be a mistake, but it seems that Firefox is the only browser that does this.
<html> <head> <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript"> function test() { $("#skills")[0].innerHTML = "some new text" } </script> </head> <body> <a href="#" onclick="test()">test</a> <a href="http://google.com"> <p id="skills">Skills</p> </a> </body> </html> This is not a bug in Firefox, you get more <a></a> ... I would turn off all your plugins and try again, something specific in your installation is interfering here.
I assume you are viewing this with Firebug, does the exact example that you mentioned above (with nothing else on the page) do the same? Here you can try the demo: http://jsfiddle.net/Wcjk9/
Update:
Your example does show some strange behavior in Firefox, however this is "allowed" for this. Since you have invalid HTML, the browser can and does give some kind of fancy behavior here. The analyzer / scripting mechanism in the browser may suggest that you have valid HTML, such as unique identifiers. If you have the wrong HTML, well ... it cannot be held responsible. I have to include this quote :
On two occasions they asked me: "Pray, Mr. Babbage, if you made a mistake in the car, will there be correct answers?" I do not have the right to correctly perceive the confusion of ideas that can provoke such a question.
Ignoring the errors that jsbin adds, you can see this problem here (first validation error). You are not allowed to have a block element inside the binding. You may have an inline element, if you replace <p> in your example with <span> , you will have valid HTML ... and this strange behavior will disappear :)
I suspect there is an addon on your side or your HTML code is incorrect. Try disabling your addons and running your HTML through the validator ( http://validator.w3.org ).
Also, if all you intend to change is text and does not add HTML, I would recommend using the text function instead of the html function (although I doubt this will fix your problem simply by saying that this is the right tool for the job)