CODEWITHSUNDEEP
javascriptjquery
Allain Lalonde
Allain Lalonde

Reputation: 93318

Weird Behaviour in jQuery's html method

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.

Upvotes: 3

Views: 2258

Answers (5)

powtac
powtac

Reputation: 41040

Try using text() instead html().

Upvotes: 0

Allain Lalonde
Allain Lalonde

Reputation: 93318

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.

Upvotes: 0

Pim Jager
Pim Jager

Reputation: 32119

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

Upvotes: -1

Eric Schoonover
Eric Schoonover

Reputation: 48392

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

Upvotes: 5

nickf
nickf

Reputation: 546025

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

Upvotes: 0

Related Questions