$.appendTo() fails for audio tag on IE9

Reported by:	nebupookins@gmail.com	Owned by:	nebupookins@gmail.com
Priority:	low	Milestone:	1.next
Component:	manipulation	Version:	1.5.1
Keywords:		Cc:
Blocked by:		Blocking:

Description

Reproducible test case:

<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<!--[if lt IE 9]>
<script>
var e = ("abbr,article,aside,audio,canvas,datalist,details," +
  "figure,footer,header,hgroup,mark,menu,meter,nav,output," +
  "progress,section,time,video").split(',');
for (var i = 0; i < e.length; i++) {
   document.createElement(e[i]);
}
</script>
<![endif]-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
	$('<source src="someOtherFile.mp3">').appendTo($('audio'));
});
</script>
</head>
<body>
<audio controls="true">
	<source src="someFile.mp3">
</audio>
</body>
</html>

Expected behaviour:

The <audio> tag should have 2 <source> child elements, one pointing to "someFile.mp3" and one pointing to "someOtherFile.mp3". Firefox and Chrome both exhibit this expected behaviour. IE9 does not.

Actual behaviour:

In IE9, the audio tag has only 1 <source> child element.

Additional notes:

If you remove the conditional code for IE, you get an error "Unexpected call to method or property access." which is still not the expected behaviour.

Attachments (0)

Change History (8)

Changed March 30, 2011 04:29PM UTC by rwaldron comment:1

component:	unfiled → manipulation
owner:	→ nebupookins@gmail.com
status:	new → pending

Can you run this test case and confirm that there is only one source elem?

http://jsfiddle.net/rwaldron/J5nPR/1/

Changed March 30, 2011 05:09PM UTC by danheberden comment:2

http://danheberden.com/share/829b36b.png - 2 of them

Changed March 30, 2011 09:22PM UTC by nebupookins@gmail.com comment:3

status:	pending → new

When I run the test case at http://jsfiddle.net/rwaldron/J5nPR/1/ I get 2 source elements.

Changed April 01, 2011 01:03AM UTC by timmywil comment:4

What about http://jsfiddle.net/timmywil/J5nPR/3/? It may be that the tag wasn't closed. However, that is not a problem in other browsers that support html5 tags.

Changed April 01, 2011 01:09AM UTC by rwaldron comment:5

priority:	undecided → low
resolution:	→ worksforme
status:	new → closed

Sarcasm doesn't translate well in tickets...

Changed April 01, 2011 01:13AM UTC by timmywil comment:6

I wasn't being sarcastic. I'm asking if $('<source>') is valid versus $('<source/>')

Changed April 01, 2011 01:14AM UTC by timmywil comment:7

Not closing the tag is preferred in html5, so people do <input> instead of <input/>. I'm wondering if this should be supported if it is not already.

Changed April 01, 2011 01:40AM UTC by timmywil comment:8

Oh, you were referring to yourself. :) And apparently it is supported. Adding attributes forces the use of innerhtml, which ie9 may or may not support correctly. <o></o>

Side navigation

#8598 closed bug (worksforme)