Search code examples
javascriptjquerysyntaxcreateelement

Syntax issues with .createElement('object') and a lot of params

If you need more information, just let me know.

I'm trying to dynamically create an 'object' element with jquery in this fashion- this code resides inside a function/scope where all of the data is available but I don't know how to create the object on the document... it works fine in testing if I just paste the line down as raw html and set values (nothing dynamic).

var object = document.createElement('object');

$('#main').append(object);

//i've tried .html() .push() and .append()              
$(object).append('<object class='{FOO_CLASS}' 'width='{FOO_WIDTH}' height='{FOO_HEIGHT}' type='application/x-shockwave-flash' id='live_embed_player_flash' data='http://www.twitch.tv/widgets/live_embed_player.swf?channel={FOO_CHANNEL}'><param name='wmode' value='opaque' /><param name='allowFullScreen' value='true' /><param name='allowScriptAccess' value='always' /><param name='allowNetworking' value='all' /><param name='movie' value='http://www.twitch.tv/widgets/live_embed_player.swf' /><param name='flashvars' value='hostname=www.twitch.tv&channel={FOO_CHANNEL}&auto_play=false' /></object>');

A formatted look at the entire object.. everything I've tried has failed. Usually due to the code reading the // from the URL as a comment mark. I'm just totally lost ..

<object
    class='{FOO_CLASS}'
    width='{FOO_WIDTH}'
    height='{FOO_HEIGHT}'
    type='application/x-shockwave-flash'
    id='live_embed_player_flash'
    data='http://www.twitch.tv/widgets/live_embed_player.swf?channel={FOO_CHANNEL}'>
<param
    name='wmode'
    value='opaque' />
<param
    name='allowFullScreen'
    value='true' />
<param
    name='allowScriptAccess'
    value='always' />
<param
    name='allowNetworking'
    value='all' />
<param
    name='movie'
    value='http://www.twitch.tv/widgets/live_embed_player.swf' />
<param
    name='flashvars'
    value='hostname=www.twitch.tv&channel={FOO_CHANNEL}&auto_play=false' />
</object>;

Worth noting that I made another element already and I'm basing it all on that success. I really am too lost to know for sure what I'm doing ..

var ttvbox = document.createElement('div');
$(ttvbox).attr('class', 'abox');
$(ttvbox).attr('id', 'test');
$('#main').append(ttvbox); //inspecting the elements shows it created
Solution

  • If your inner HTML uses single '' quotes use double "" quotes around. Also, you can directly append HTML in jQuery. There's no need to create an element before using append().

    $( '#main' ).append( "<object> ... html with single 'quotes' ... </object>" );

    In case, you need to have a reference to <object> element as well use appendTo() as

    var $object = ( "<object> ... </object>" ).appendTo( $( '#main' ) );