I have a simple piece of HTML
<p id="skills">Skills</p>
in Firefox 3.6.3 when I call (with JQuery):
$("#skills")[0].innerHTML = "some new text"
Firefox renders it as
<p id="skills"><a xmlns="http://www.w3.org/1999/xhtml">some new text</a></p>
Where in the world is that link coming from??
(note the same thing happens by calling $("#skills").html("some new text") with JQuery)
Source: Tips4all, CCNA FINAL EXAM
It's not a bug in Firefox, you're getting an extra <a></a> in there in the first place...I'd disable all your plugins and try again, something specific on your install is interfering here.
ReplyDeleteI assume you're viewing this with Firebug, does the exact example you gave above (with nothing else in the page) do the same thing? You can try a demo here: http://jsfiddle.net/Wcjk9/
Update:
Your example does indeed show some weird behavior in Firefox, however it's "allowed" to do this. Since you have invalid HTML, the browser can and indeed is giving some funky behavior here. The parser/scripting engine in the browser is free to assume you have valid HTML, like unique IDs for example. If you have invalid HTML, well...it can't be held responsible. I have to include this quote:
On two occasions I have been asked, 'Pray, Mr. Babbage, if you put into the machine wrong figures, will the right answers come out?' I am not able rightly to apprehend the kind of confusion of ideas that could provoke such a question.
Ignoring the errors that jsbin adds, you can see the problem here (the first validation error). You are not allowed to have a block element inside an anchor. You can have an inline element, if you replace the <p> in your example with a <span> you'll have valid HTML...and this weird behavior goes away :)
I suspect there's an addon on your side or your HTML is somehow malformed. Try disabling your addons and running your HTML through a validator (http://validator.w3.org).
ReplyDeleteAlso, if all you intend to change is the text and aren't adding any HTML I would recommend using the text function instead of the html function (Though I doubt this will fix your issue, just saying it's the right tool for the job)
Turns out my sample code excluded the portion which is the actual problem, here is a working sample page to show the issue. When you change the html of any element within a link, it wraps all text with
ReplyDelete<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 skills with:
<a xmlns="http://www.w3.org/1999/xhtml">some new text</a>
This may not be a "bug", but it seems firefox is the only browser that does it.
<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>