Weird Behaviour in jQuery's html method

Question

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.

Answer 1

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

Answer 2

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

Answer 3

尝试使用text()而不是html() 。

Answer 4

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.

Answer 5

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