tags:

views:

237

answers:

3

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"&gt;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)

+7  A: 

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.

I 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 :)

Nick Craver
Yeah I'd have to agree with you on this. Something is hijacking the innerHTML request. Your demo worked fine from here.
lark
+1  A: 

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).

Also, 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)

Tim Schneider
There is virtually no difference between text and html in this case except that the html function will replace text more efficiently...
lark
Yes, but I highly suspect that this isn't the finished objective. As I said I don't think that will fix his problem (The first paragraph might though), I'm just recommending as a sidenote using the text function if you don't plan to set any actual HTML. I think as a general rule the extra security of it's well and truly worth the small overhead, plus right tool for the job etc.
Tim Schneider
+1  A: 

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

<a xmlns="http://www.w3.org/1999/xhtml"&gt;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"&gt;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"&gt;&lt;/script&gt;
    <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"&gt;
      <p id="skills">Skills</p>
    </a>
  </body>
</html>
M. Singleton
You're correct in that Firefox is doing something unexpected here, *but*, that's not valid HTML, so it's not guaranteed to behave in any certain way. You're not allowed to have a block element inside an anchor, if you change that `<p>` to a `<span>` which *is* valid then it works. You can check your sample HTML for validity here: http://validator.w3.org/#validate_by_input
Nick Craver
I just got bit by this while trying to debug a WMD preview issue in Firefox. The preview div was inside a b tag set to display:block. Firefox apparently ignores the CSS attributes and says "NO, you can't do that!" I call that a bug, but I know I'd be fighting a losing battle if I tried to submit it.
ChiperSoft