jQuery is unable to select cells outside table

Question

I know using <td> outside <table> is an invalid markup but it is still a node in HTML DOM. That is why I am able to see those two cells rendered. jQuery is unable to get me those cells. Here is the JSBin Demo and Code

HTML

<table>
  <tr><td class='cell1'>Cell inside table</td></tr>
</table>

<tr>
  <td class='cell2'>Cells without table</td>
  <td class='cell2'>Cells without table</td>
</tr>

JS

var $a = $('#a');

var numCells1 = $('.cell1').length;
var numCells2 = $('.cell2').length;

$a.html('Num Cell1:' + numCells1 + '  Num Cell2:' + numCells2);

Output

Num Cell1:1 Num Cell2:0

Why Num Cell2 is 0? What am I doing wrong ?

Changing your second query to `$('td').length` results in `1`...so I guess invalid markup is disregarded. Interesting. — David Hoerster, Mar 05 '14 at 23:37
Note that you CAN create partials (DOM element hierarchy not in the document) in jQuery, and insert them into the document later. As was stated below, you just can't drop improper elements into the document itself. — Jim Cote, Mar 05 '14 at 23:39
@JimCote I understand but my doubt is Why browser removed the `` tag but not the `` tag in this case http://jsbin.com/wimixuxi/2/edit?html,css,js,output — Sachin Jain, Mar 05 '14 at 23:43

score 6 · Accepted Answer · answered Mar 05 '14 at 23:37

That is the browser doing its trick, nothing wrong with jQuery. The browser won't render the <tr> if its not within a table and will just strip off all the tags leaving out just plain text. Check your elements panel in browser to see the markup.. there is no element with a class of cell2

score 4 · Answer 2 · answered Mar 05 '14 at 23:38

4

Inspect the element, you'll see that the browser threw away the invalid markup and is just displaying the text.

enter image description here

answered Mar 05 '14 at 23:38

Barbara Laird

12,599
2
44
57

Isn't it strange that it threw away `` tag as well. Browser does not throw away invalid HTML tags. See this http://jsbin.com/wimixuxi/2/edit?html,css,js,output – Sachin Jain Mar 05 '14 at 23:40
@blunderboy well, it does throw away. At least it did in the jsBin you provided in the comment. – matewka Mar 05 '14 at 23:43
@blunderboy that is a custom tag and not invalid markup check this out http://stackoverflow.com/questions/2802687/is-there-a-way-to-create-your-own-html-tag-in-html5 http://stackoverflow.com/questions/9845011/are-custom-elements-valid-html5 – Lucky Soni Mar 05 '14 at 23:43
I find it stranger that it keeps your tag than that it throws away the invalid and s. – Barbara Laird Mar 05 '14 at 23:44

Zeta · Answer 3 · 2014-03-05T23:46:06.737

but it is still a node in HTML DOM

That's a wrong assumption, see 3.2.1 Semantics:

Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose, as doing so prevents software from correctly processing the page.

[...]

Authors must not use elements, attributes, or attribute values that are not permitted by this specification or other applicable specifications, as doing so makes it significantly harder for the language to be extended in the future.

Especially since the HTML5 recommendation dictates a specific parser behaviour, where <tr> gets only parsed correctly in the "in table" state.

jQuery is unable to select cells outside table

HTML

JS

Output

4 Answers4

Linked