views:

1758

answers:

5

Any good reason why $("p").html(0) makes all paragraphs empty as opposed to contain the character '0'?

Instead of assuming I found a bug in jQuery, it's probably a misunderstanding on my part.

A: 

I guess that at some point, it checks if (newContent == false), and doesn't continue with adding any content? I tried looking at the source, but got a bit lost...

I also guess that this would not be counted as a bug, since the function calls for a string, and if "0" is passed (as a string), it works as expected.

A workaround would be to do this:

var myNum = 0;
$('p').html('' + myNum);
nickf
+5  A: 

jQuery only accepts a string as an argument for the val parameter of the html() method. If you pass a number like you are it will call the html() method override that sets the contents of the element but the value of the argument will end up being null or an empty string.

Try this:

$("p").html((0).toString())

Relevant documentation

spoon16
Just a minor nitpick: that should be (0).toString(). Otherwise it parses the period as part of the number and gets a syntax error.
Matthew Crumley
thanks Matthew, I updated
spoon16
A: 

I geuss you missed part of how jQuery works,

$('p')

returns all paragraphs and the html( val ) function:

Set the html contents of every matched element. This property is not available on XML documents (although it will work for XHTML documents).

http://docs.jquery.com/Attributes/html#val
So if you just want to set the contents for the first p use

$("P").eq(0).html( 'something' );

or to get the html:

$("P").eq(0).html();

http://docs.jquery.com/Core/eq#position
more on jQuery selectors here:
http://docs.jquery.com/Selectors

Pim Jager
I understand how it works, I just noted the behavior when it's passed the number 0.
Allain Lalonde
Ohh sorry, I though you meant why it didn't contain the html for the 1st paragraph
Pim Jager
A: 

Try using text() instead html().

powtac
A: 

The code performing the html call was within someone else's plugin and rather than modify it, making upgrading it tedious, I just wrote the following tiny plugin that modifies the html method to do as spoon16 recommended.

(function($) {
  var oldHtml = $.fn.html;
  $.fn.html = function (content) {
    oldHtml.apply(this, [content.toString()]);
  }
})(jQuery);

It's a little bit of a hack, but it's working for me and doesn't require me to modify the Plugin I'm using.

I just thought someone else might like to see this.

Allain Lalonde