javascript - 使用包括脚本的长 block 动态更改 div 的源/内容

Question

我看到了很多有关类似问题的问题和答案，但我还没有找到这个特定案例的答案。

我有一个<div>在我将动态数据显示为图形的网页中，它需要 javascript 进入 <div> (使用dygraph库)。我想实现一个复选框来更改 <div> 的内容在图形代码和显示实时网络摄像头连接的代码之间，这也需要脚本。

我尝试过innerHTML和基于我找到的示例的jQuery函数，但它们都是指非常简单的HTML更改，没有脚本内容，我发现更复杂的是如何将图片更改为<div>内容。我读过<div>不支持 src 属性，其他论坛说是的，就我而言，它不起作用。图书馆div-src.js ，也不适用于这种情况。

另一个尝试是 <iframe>标记它已经工作，但页面无法正常工作并且变得不稳定，特别是 websocket 连接。 Eclipse 显示一条警告，指出“未知标签”，我已读到 <iframe>在 HTML5 中已过时。

我想用 jQuery 执行此操作，但直到知道没有成功。

动态插入 <div> 的最佳方法是什么？带有脚本的长 HTML 代码块，以及对 js 库的调用？.

<input type="radio" name="radiobutton" value="graph" onClick="changeDivContent()">
<input type="radio" name="radiobutton" value="video" onClick="changeDivContent()">

<div id="graph-video">
 --- Block with HTML, nesting divs and javascript ---
</div>

注意:对于 jQuery，我尝试使用 .load功能:

$( "#graph-video" ).load( "video.jsp" );
$( "#graph-video" ).load( "graphic.jsp" );

结果:图形代码导致故障和 websocket 关闭。

Answer 1

试试这个

function changeDivContent() {
    $('#graph-video').html('<iframe width="420" height="345"src="http://www.youtube.com/embed/XGSy3_Czz8k"></iframe>)');
}

或使用外部 html 文件

$('#graph-video').load('external_file.htm');