ansaurus

Question

Can't select HTML5 element's children in IE8 with jQuery selector

Answer 1

+2 A:

Internet Explorer 8 has quirky support for HTML 5, IE6 and IE7 plain just don't support it.

You need to shiv the HTML 5 elements in order to style and properly use methods/properties such as innerHTML, getElementsByTagName on them.

This will work in IE6-IE8:

<!doctype html> 
<html> 
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"&gt;&lt;/script&gt;
<![endif]--> 
<section class="pleaseWaitButton"> 
    <p><img src="images/please_wait.png" alt="Please wait" /></p> 
        <p><input type="image" src="images/add_to_cart.png" alt="Add to cart"/></p> 
</section> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"&gt;&lt;/script&gt; 
<script> 
    alert( $('.pleaseWaitButton').find('input').length ) 
    alert( $('.pleaseWaitButton input').length ) 
    alert( $('.pleaseWaitButton > p > input').length ) 
</script> 
</html>

Live Demo: http://medero.org/html5.html

meder 2010-07-28 11:57:44

Note that the shiv doesn't solve all problems with the new elements; in particular `innerHTML` needs special care. I wouldn't use the HTML5 semantic container elements yet: they'll only give you IE bugs and as yet have little tangible benefit over a div.

bobince 2010-07-28 12:38:25

I will say that the HTML5 elements have made my css extremely clean compared to what I've written before. For example, every time I have styles for the main item on a page, it's always my article element, so the css is super clean because I just need to style the article element. That's just one example. No need for ids in most cases.

sfjedi 2010-07-28 12:56:18

Thanks for the answer. It's working well so far. I don't ever ever ever use innterHTML so that's not going to be a problem.

sfjedi 2010-07-28 13:08:45

Answer 2

+3 A:

<section> is an HTML5 element not supported in IE8, you'll have issues using it as an element, including finding children beneath it. It isn't a jQuery problem, it's a basic DOM problem, here's a demonstration:

All I'm doing is giving the element an ID to simplify things:

<section class="pleaseWaitButton" id="btn">

Then try and get it's children:

document.getElementById('btn').children.length

This gets you a 2 in HTML5 browsers, an 0 in IE.

Nick Craver 2010-07-28 11:59:59

You can create the element manually so IE supports styling and DOM manipulating properly. There's also a fix by Jonathan Neal for printing HTML 5 elements, since IE doesn't support that for HTML 5 elements natively.

meder 2010-07-28 12:28:39

@meder - True, my answer was to *why* doesn't work, and the html5shiv code has [other issues](http://code.google.com/p/html5shiv/issues/list) so it's not a quick fix. As a side note, for your example, when doing an example page, make sure to have valid HTML or it's not a valid test :)

Nick Craver 2010-07-28 12:34:11

What was invalid?

sfjedi 2010-07-28 12:54:03

@sfjedi - An HTML document needs a `<head>` for example :)

Nick Craver 2010-07-28 13:13:21

A `<head>` and `<title>` would have no bearing on my test case, though. Same with a `<body>` element.

meder 2010-07-28 13:16:56

Fortunately, we're all probably smart enough here to figure that part out. Thanks for the example, meder.

sfjedi 2010-07-28 20:30:19

ansaurus

tags:

views:

answers:

Can't select HTML5 element's children in IE8 with jQuery selector

related questions