Why isn't jquery's .html() working on ?

Question

I have this code:

<script> 
function del(a){
        alert(a);
        alert($("#"+a).html());
        alert($("#td").html());
            alert($("#div").html());
}
</script> 
<td id="td">wtf</td> 
<div id="div">wtf</div> 
<table> 
   <tr>
       <td id="bbbbb">test</td><td><span onclick="del('bbbb');">click</span></td>
   </tr>
</table>

Alerts are

bbbbb
test
null
wtf

td content is marked as null (ignored) ?

Why?

proof http://sandbox.phpcode.eu/g/743de.php

UPDATE:

look here and my alert gives me null, too

Please note that JavaScript DOM manipulation on invalid HTML is not predictable. You can never guess what DOM tree the browser will build. — Álvaro González, Jul 27 '11 at 18:48

Yiğit Yener · Answer 1 · 2011-07-27T19:07:27.303

5

alert($("#"+a).html());

is null because you are passing an invalid id.

alert($("#td").html());

is null because the element td is not valid html in its context.

Edit: Your code works fine there. Just your id is not valid this time. Can't start with numeric.

edited Jul 27 '11 at 19:07

answered Jul 27 '11 at 18:48

Yiğit Yener

5,496
1
21
24

@genesis Check out this. http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html You have still invalid chars – Yiğit Yener Jul 27 '11 at 19:16
@genesis Works for x5c192php and x5c192php-d – Yiğit Yener Jul 27 '11 at 19:17
@YiğitYener let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/1894/discussion-between-genesis-and-yigit-yener) – genesis Jul 27 '11 at 19:23

score 5 · Accepted Answer · answered Jul 27 '11 at 19:48

First off, you cannot have <td> elements outside of a table, but it seems in your update, you've fixed that.

In your latest update, the fiddle you posted returns null because of how jQuery selectors work. The ID you are looking for is "5c192.php", so when you do $('#'+a) it becomes $('#5c192.php'), which is being interpreted as 'ID=5c192' and 'class=php', because . is a class selector.

Change $('#'+a) to$('[id="'+a+'"]').

Thomas Shields · Answer 3 · 2011-07-27T19:12:15.290

3

You're calling del("bbbb") but the id of the <td> is "bbbbb", with five b's. Not sure if this is your issue though. Also, you can't have a <td> outside of a table, which is probably why the $("#td") is messing up. Try:;

<script> 
function del(a){
        alert(a);
        alert($("#"+a).html());
        alert($("#td").html());
            alert($("#div").html());
}
</script> 

<div id="div">wtf</div> 
<table> 
   <tr>
       <td id="bbbbb">test</td><td><span onclick="del('bbbbb');">click</span></td>
<td id="td">wtf</td> 
   </tr>
</table>

Edit

a td is not valid outside of a table. If you look at the generated output via the web inspector you'll see that the td has been stripped out and it's content placed on the page as plain text. The td is invalid there and thus trying to get to it via JS is going to prove difficult and not a good idea.

edited Jul 27 '11 at 19:12

answered Jul 27 '11 at 18:45

Thomas Shields

8,598
5
39
77

Bah! You beat me to it. The other issue is that `#td` is a `` sitting outside of a table, so the browser strips the tag, usually. – Reid Jul 27 '11 at 18:46
good eyes!! However, that second (not in ) is still not working
– genesis Jul 27 '11 at 18:47
@Reid: I see that td outside table (wtf) normally without problems – genesis Jul 27 '11 at 18:48
Don't you need TBODY tags too? – bozdoz Jul 27 '11 at 18:54
@bozdoz no. it's optional; browsers insert it automatically. – Thomas Shields Jul 27 '11 at 18:55

bozdoz · Answer 4 · 2011-07-27T18:53:27.690

3

Should enclose TDs in TABLE tags.
Like this example: jsfiddle

edited Jul 27 '11 at 18:53

answered Jul 27 '11 at 18:47

bozdoz

10,929
7
55
86

score 2 · Answer 5 · edited May 23 '17 at 10:31

That floating <td> element is not valid and basically gets parsed out into

wtf

without the invalid td elements. Change it to a span, div, etc. it will work. In addition to the missing b

UPDATE:

In your jsFiddle you have an invalid ID of 5c192.php. Specifically, not starting with a letter. From What are valid values for the id attribute in HTML?

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

Although, I would remove the period as well.

The period is not valid in .php in your ID – Joe Jul 27 '11 at 19:05 — Joe, Jul 27 '11 at 19:05

score 1 · Answer 6 · answered Jul 27 '11 at 18:47

1

The first td (the one with the id="td") is outside of a table (tds are always supposed to be inside a table) and you call the function del giving a string with 4 b, bbbb while your td has 5 d, ddddd.

answered Jul 27 '11 at 18:47

gred

512
4
15

so that td outside is being ignored if it's ouside
? – genesis Jul 27 '11 at 18:49
1

Yeah. Most probably that's the reason. You shouldn't use tds outside of tables in general, whether you use jquery upon them or not. – gred Jul 27 '11 at 18:52
1

And another tip, avoid using elemnt names as ids. E.g. td, div are element names, avoid using them as ids. – gred Jul 27 '11 at 18:53

score 1 · Answer 7 · answered Jul 27 '11 at 18:47

1

Since bbbbb (5x) and bbbb(4x) are different.

answered Jul 27 '11 at 18:47

Johan

3,162
1
21
19

the element with id td isn't right either, $("td").eq(0).html() works though, it get the first td on the page that is in a table, the first one is discarded as improper html (td not in a table). – Johan Jul 27 '11 at 18:50

Why isn't jquery's .html() working on ?

UPDATE:

7 Answers7

Edit