I've "cached" a jQuery object that I use inside a loop called $myElement. I would like to use some native JavaScript functions on it (for better performance). However, my attempts below throws errors (the element is undefined). Is there any way to accomplish this?
$myElement.find('span')[0];
$myElement.find('span').get(0);
Update: What Im trying to do is something like:
$myElement.find('span')[0].innerHTML('some text');
That's giving me an error.
You seem to need
$myElement.find('span')[0].innerHTML = 'some text';
Because innerHTML isn't a function on basic DOM elements.
But there is nothing wrong, if you get your element using jQuery, to also use the html function :
$myElement.find('span').first().html('some text');
I don't think you're optimizing at the right point.
$myElement.find('span')[0].html('some text')if jQuerys abstraction is OK
html() method on the dom element
The .innerHTML property is not a function. Just set its content using assignment.
.innerHTML = "foo";
But be careful with .innerHTML when using jQuery. If you clear content like that, and any of that content has any data or handlers assigned with jQuery, you'll have a memory leak.
A safer practice would be to use jQuery to update content.
.html("foo");
You can use jQuery's "first" function like this:
$myElement.find('span').first();
Or use to get an nth-child by an index using jQuery's "eq" function, like this:
$myElement.find('span').eq(3);
Or you can also use jQuery's "get" function to return a DOM instance of that match:
$myElement.find('span').get(2);
As you can see on this example:
$myElement? Is thespanitself in there or a parent of it? If thespanis already in the object you could also usefilter(), which doesn't read the DOM but only the objects contents.