javascript - 为什么当我尝试进行.clone()视讯聚会时却没有出现？

这是我的代码笔：http://codepen.io/anon/pen/pjxrmO

HTML：

<button>Create a new hangout</button>
<hr />
<div id="container">
  <p id="hello">hello</p>
<div id="hangout" class="g-hangout" data-render="createhangout"></div>

</div>
<script src="https://apis.google.com/js/platform.js" async defer></script>

jQuery的：

$(document).ready(function() {
  $('button').on('click', function() {
   console.log('hello world');
     $('p').clone().appendTo('#container');
    $('#hangout').clone().appendTo('#container');
  });
});

我很困惑为什么我在尝试$（'p'）。clone（）。appendTo（'＃container'）时会按预期的方式在单击按钮时将段落克隆，但是不会克隆。

最佳答案

<div id="hangout">不会保留在DOM中，因为它是在原始标记中编写的。

当Google API设置环聊按钮时，它会更改或替换元素：

<div id="___hangout_0" style="...">

因此，当.click事件发生时，不再有id="hangout"元素与#hangout选择器匹配。

$('button').click(function () {
  console.log( $('#hangout').length ); // 0
});

为了能够克隆它，您必须调整选择器以匹配所设置的id。

$('#___hangout_0').clone().appendTo('#container');

您还可以创建一个新的<div>并将其呈现为按钮using gapi.hangout.render()。

$(document).ready(function () {
  var hangouts = 0;

  $('button').click(function () {
    $('#hello').clone().appendTo('#container');

    var hangout = $('<div>').appendTo('#container').get(0);
    gapi.hangout.render(hangout, { 'render': 'createhangout' });
  });
});