How can I add a Video/Audio object to the DOM?

I create a new HTML5 Audio() object in Javascript code in my page. I want to place this audio object inside a table cell.

typeof() tells me that Audio() gives me an object, and so .append() on th开发者_运维技巧e table cell jquery object does not work.

I'd like to place the object into the page and show its controls so the user can interact with it - is that possible without actually writing the

<audio src...></audio>

HTML ?

The way you do it in jQuery, you use html syntax:

td.append("<audio>");

The angle brackets tell jQuery to create a new element. I'm not sure what method jQuery uses behind the scenes (whether innerHTML or doc.createElement()), but the non-jQuery approach would be:

var audioElement = td.appendChild(document.createElement("audio"));

To use the new Audio() syntax, the non-jQuery code is similar:

var audioElement = td.appendChild(new Audio);

Edit: I just tested, and jQuery seems to have no problem with this in Chrome:

td.append(new Audio());

Here's a jQuery demo: http://jsfiddle.net/gilly3/WRqyM/1

Update: IE9 doesn't seem to work. :-( IE9 just doesn't show up unless the audio has a src. I've updated the jsfiddle.