jquery chain html elements

Question

这是我的jQuery代码：

 $("#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'
    })))
  );​

以下是所需的输出：

<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>

然而，这是目前从我的jQuery输出的内容：

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

有人可以告诉我如何解决最后一个源元素吗？

Answer 1

你可以这样做，

现场演示

 $("#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'
    })))
 );

Answer 2

你需要把元素放到一个数组中。

演示

$("#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'
      })]
    )
  )
);​