Question

i started learning jQuery and i wish to know why jquery methods cannot be applied

in this example :

$('p')[0].html('salut !'); //for this instruction i got this error :
                           //"TypeError: $(...)[0].html is not a function "

while this one works :

$('body')[0].tagName.toLowerCase();

i m confused and i wish to know what is the difference between these 2 cases.

here is another example for the same problem :

var listItems = $( 'li' );
var rawListItem = listItems[0]; // or listItems.get( 0 )
var html = rawListItem.html();
// Object #<HTMLInputElement> has no method 'html'

here is the way on how to use jquery methods by using the .eq() :

var listItems = $( 'li' );
var secondListItem = listItems.eq( 1 );
secondListItem.remove();

thanks for supplying some explanation for this.

Answer 1

A jQuery object is completely different to a DOMElement.

• jQuery objects let you perform jQuery operations of them. html(), val(), eq(), etc.
• DOMElement‘s… don’t. As they’re DOMElements, not jQuery objects.

If you check the documentation for .get(), you’ll see you get a DOMElement back, not a jQuery object. The same goes for [0] etc.

eq(), however, returns a jQuery object which lets you do jQuery operations on them.

tagName is a DOMElement attribute, which is why can perform it on the DOMElements returned by get(), but can’t perform it on the jQuery objects returned by eq(). The opposite applies for html() when used on get() and eq().

You can, of course, wrap any DOMElement in a jQuery object via $(), which’ll let you perform jQuery operations on it;

$($('p')[0]).html('salut !');

But in your situations, you should be using eq():

$('p').eq(0).html('salut !');