Javascript 在onclick之后加载隐藏div中的内容

我是一个前列腺癌组织的志愿者，我们有一个网站，里面嵌入了很多YouTube视频。我们现在有太多了，以至于页面在加载时陷入困境，即使每个视频都隐藏在onClick div中

问：有没有一种简单的方法可以让div只在被点击时加载内容？该页面将不会拉YouTube嵌入，直到它被点击触发

这是包含所有视频的网页，单击任意一行即可调出我希望在单击后加载的内容：

下面是每个隐藏div的代码片段：

<p class="subHeader">
  <a onMouseOver="this.style.cursor='pointer';" onclick="toggle_visibility('nov14');$(this).text($(this).text() == '[+] New Drugs in the Prostate Cancer Clinic ' ? '[-] New Drugs in the Prostate Cancer Clinic ' : '[+] New Drugs in the Prostate Cancer Clinic ');">[+] New Drugs in the Prostate Cancer Clinic </a>
</p>
<div id="nov14" style='display:none;'>
  <table width="400" style="background-color:#4f4f4f;border:3px solid #333;" align="center" cellpadding="5" cellspacing="5">
    <tr>
      <td>
        <iframe width="400" height="254" src="//www.youtube.com/embed/XvfzhBrK_SQ" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>    
      </td>
     </tr>
    </table>
</div>

---

Stack Overflow post的响应似乎是正确的，但我不完全确定如何使用上面的编码。所有会员都将非常感谢您的帮助

您可以为每个视频制作不同的页面。我不知道这是否是您想要的，但是如果您将它们都设置为相同的，并且每个链接都指向一个只有该视频的不同页面，则可以加快加载速度。

如果您需要将HTML存储在DOM中，可以将其保存在文本区域中

警告：我还没有测试过这个

<script>
function toggle_visibility(var div){
    if(jQuery('#' + div).css('display') == 'none') {
        //show it
        //fetch html from the textarea and load into the lonely div, then show the parent div.
        var htmlFromTextarea = jQuery('#' + div + ' textarea').val();
        jQuery('#' + div + ' div').html(htmlFromTextarea).parent().show(0);
    } else {
        //hide it and clear the div to unload
        jQuery('#' + div).hide(0).find('div').html('');
    }
}
</script>
<p class="subHeader">
    <a onMouseOver="this.style.cursor='pointer';" onclick="toggle_visibility('nov14');$(this).find('.expander').html($(this).find('.expander').html() == '[+]' ? '[-]' : '[+]');">
        <span class="expander">[+]</span> New Drugs in the Prostate Cancer Clinic
    </a>
</p>
<div id="nov14" style='display:none;'>
    <textarea style='display:none;'><table width="400" style="background-color:#4f4f4f;border:3px solid #333;" align="center" cellpadding="5" cellspacing="5">
    <tr>
        <td>
            <iframe width="400" height="254" src="//www.youtube.com/embed/XvfzhBrK_SQ" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>    
        </td>
    </tr>
    </table></textarea>
    <div></div>
</div>

---

Smth如下所示：+您可以为每个视频加载图像：看，您在代码末尾有一个错误的标记。@Glavić感谢您的分享，这很好，很干净！唯一的问题是它似乎无法与我现有的onClick一起工作。查看本页：我已经在前列腺癌诊所试用了排名前一位的新药，其他两种与我的示例中的相同。关于如何让它工作有什么想法吗？以上假设使用jQuery。谢谢James，我喜欢这种方法，但我似乎无法让它工作。单击onClick之后，不会加载div。这是我加载它的页面：我只为排名靠前的前列腺癌诊所的新药做过