jQuery .html() function not working

Question

I have the following mark up code

<!DOCTYPE html>
<html>
<head>
    <title>Untitled</title>
</head>
<body>
<table>
    <tr>
        <th></th>
        <th></th>
        <th>Back</th>
    </tr>
    <tr>
        <td class="runner-row runner-back">1.98</td>
        <td class="runner-row  runner-back">1.99</td>
        <td class="runner-row  runner-back runner-back-active">2.00</td>
    </tr>
</table>
</body>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</html>

I use the following Javascript code to change the values of my "runner-row" elements

window.onload = function() {
    var gElemRunners = $(".runner-row");
    gElemRunners[0].innerHTML = 1.5;
    gElemRunners[1].innerHTML = 1.6;
    gElemRunners[2].innerHTML = 1.7;
}

This code works absolutely fine and the values update properly when the window has loaded. However, the following code does not work.

window.onload = function() {
    var gElemRunners = $(".runner-row");
    gElemRunners[0].html(1.5);
    gElemRunners[1].html(1.6);
    gElemRunners[2].html(1.7);
}

I get the following error in DevConsole

Uncaught TypeError: $(...)[0].html is not a function

I get the same error even if I change the .html to .text or .val. Please help me with this because I can't seem to understand where the problem lies.

Using `$('selection')[0]` exposes the DOM API underneath. This will not return a jQuery object and therefore will not have the `.html()` method. — , Jul 09 '15 at 01:52
Well you could use `.eq(0).html()` or you could just use the method that works already. — , Jul 09 '15 at 02:00

score 17 · Accepted Answer · answered Jul 09 '15 at 01:58

17

$(...)[0] will return the DOM element. If you want to use a jquery function, it has to be on a jquery selector object. If you want to get the jquery selector for a specific index, use the eq function:

$('selection').eq(0).html();

answered Jul 09 '15 at 01:58

The_Black_Smurf

5,178
14
52
78

1

Thanks, this solved the problem straight away :) You guys are awesome! Thanks to everyone who answered! – user2352119 Jul 09 '15 at 02:04
in for loop i had to do this any suggestion to make it more beautifull ? `$("#s2id_search-products-autocomplete > ul > li.select2-search-choice > div").each(function(i, obj) { $("#s2id_search-products-autocomplete > ul > li.select2-search-choice > div").eq(i).html(); });` – shareef Jul 24 '18 at 09:31

score 2 · Answer 2 · answered Jul 09 '15 at 02:02

When you read from jQuery object gElemRunners, you're getting HTMLElement and not the jQuery object. You have to wrap the HTMLElement again to jQuery object before using any of it's function.

Try this instead (also there can be multiple better ways, I'm just suggesting one here) -

$(gElemRunners[0]).html(1.5)
...

score 1 · Answer 3 · answered Jul 09 '15 at 02:02

As already pointed out gElemRunners[0] returns the DOM API, which doesn't have a html method.

What you can use is the jQuery.each() method to iterate over your elements, or you can use gElemRunners.eq(0).html().

score 0 · Answer 4 · answered Jul 09 '15 at 02:01

The problem is that you are trying to use a jQuery method in a non-jQuery object, because when you get the first element gElemRunners[0], it is returning the DOMElement itself, not the jQuery object.

Using jQuery, you could do:

var gElemRunners = $(".runner-row");
gElemRunners.eq(0).html(1.5);
gElemRunners.eq(1).html(1.6);
gElemRunners.eq(2).html(1.7);

jQuery .html() function not working

4 Answers4