JaveWeb 公司项目（7）----- 通过JS动态生成DIV
Web网页项目的数据表格功能已经大体完成，下面是另一个主要功能，在线视频的显示
目前我做的项目是渔政监控方面，在之前C#的版本中已经实现了摄像头的在线监控，用的海康封装好的SDK，目前需要做的工作是在网页端实现在线视频的信号接入和云台控制，示例已经做好，可以看到有摄像头的选项，这时候我们可以对摄像头进行操作，视屏的开关，摄像头的调焦变焦，云台控制等，实现这些功能的前提是需要安装海康的名为WebComponents.exe的插件
对于海康摄像头的控制等函数可以参考海康的网络端，通过F12查看preview.asp页面，查看对应按钮的onclick事件即可
本篇博文的主要内容是通过JS语句动态生成，以上一篇博文为例，代码如下：
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head></head>
<body>
<div id="1" style="width:600px;height:300px;border:1px solid #000;">
<div id="2" style="float:left;width:500px;height:300px;border:1px solid #000;">div2</div>
<div id="3" style="float:right;width:94px;height:300px;border:1px solid #000;">div3</div>
</div>
</body>
</html>
生成的效果如图所示：
下面将div的语句通过js代码动态生成
首先，创建一个DIV对象
var div1=document.createElement("div");
在div内写上文字以便标识：
div1.innerHTML = "div1";
设置DIV的id：
div1.id ="Video";
通过style.cssText设置DIv的CSS样式属性：
div1.style.cssText="width:850px;height:500px;border:1px solid #000;";
最后在Body内创建DIV:
document.body.appendChild(div1);
效果如图所示:
创建好了打的div后，通过JS语句在DIV1内加载DIV2和DIV3，逻辑很简单，和创建DIV1一样创建div2和div3，不过最后生成div的时候是在div1内生成
代码如下：
<script>
//创建div1
var div1=document.createElement("div");
//设置div的id
div1.id ="Video";
//设置div的css样式
div1.style.cssText="width:850px;height:500px;border:1px solid #000;";
//在body内创建一个div
document.body.appendChild(div1);
//创建div2
var div2=document.createElement("div");
//设置div2的id
div2.id ="divPlugin";
div2.innerHTML="新的div2";
//div2的class为Box
div2.class ="Box";
//设置div的css样式
div2.style.cssText="float:left;width:700px;height:500px;border:1px solid #000;";
//在div1内创建一个div3
div1.appendChild(div2);
//创建div3
var div3=document.createElement("div");
//设置div3的id
div3.id ="Control";
div3.innerHTML="新的div3";
//设置div3的css样式
div3.style.cssText="float:right;width:144px;height:500px;border:1px solid #000;";
//在div1内创建一个div3
div1.appendChild(div3);
</script>
效果如图所示
