CODEWITHSUNDEEP
jquery
Peter
Peter

Reputation: 3184

jquery chain html elements

Here is my jQuery code:

 $("#context").html(
  $('<div>')
  .attr('data-ratio', "0.84" )
  .attr('class', "flowplayer no-background")
  .html(
    $('<video>').html(
      $('<source />', {
        type: "video/flash",
          src: 'http://google.com'
      }),
    $('<source />', {
        type: "video/mp4",
        src: 'http://google.net'
    })))

  );​

Here is the desired output:

<div data-ratio=".84" class="flowplayer no-background" >
  <video>
    <source type="video/flash" src="http://google.com"/>
    <source type="video/mp4" src="http://google.net"/>
  </video>
</div>

However this is what is currently being outputted from my jQuery:

<div data-ratio=".84" class="flowplayer no-background" >
  <video>
    <source type="video/flash" src="http://google.com"/>
  </video>
</div>

Can someone tell me how to resolve that last source element?

Upvotes: 0

Views: 189

Answers (2)

Liviu T.
Liviu T.

Reputation: 23664

You need to put the elements into an array.

Demo

$("#context").html(
  $('<div>')
  .attr('data-ratio', '0.84' )
  .attr('class', 'flowplayer no-background')
  .html(
    $('<video>').html(
      [$('<source />', {
        type: 'video/flash',
        src: 'http://google.com'
      }),
      $('<source />', {
        type: 'video/mp4',
        src: 'http://google.net'
      })]
    )
  )
);​

Upvotes: 0

Adil
Adil

Reputation: 148150

You can do it this way,

Live Demo

 $("#context").html(
  $('<div>')
  .attr('data-ratio', "0.84" )
  .attr('class', "flowplayer no-background")
  .html(
    $('<video>').append(
      $('<source />', {
        type: "video/flash",
          src: 'http://google.com'
      })).append(
    $('<source />', {
        type: "video/mp4",
        src: 'http://google.net'
    })))

 );

Upvotes: 2

Related Questions