js 动态创办div
日期：2014-05-16 浏览次数：20403 次
js 动态创建div
参考一：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script>
// Ceeate A div
function createDIV(text,id)
{
var o = document.getElementById(id);
var div = document.createElement("div");
div.id = id+1
div.innerHTML =text;
o.appendChild(div);
}
function doWhat(id)
{
createDIV("我是大笨猪,这是DIV里的内容，不能有href",id)
return false;
}
</script>
</head>
<body>
<a href="大笨猪呀" id="benzhu" onclick="return doWhat(this.id)">大笨猪呀</a><br />
需要实现<br />
<a href="大笨猪呀" id="benzhu" onclick="return doWhat(this.id)">大笨猪呀</a>
<div id="benzhu1">我是大笨猪,这是DIV里的内容，不能有href</div>
</body>
</html>
参考二：
js 鼠标经过 弹出菜单 延时隐藏
2010-12-06 16:16
?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script type="text/javascript">
<!--
var time;
function test(){
var a=document.getElementById("a1");
var menu=document.getElementById("menu");
menu.style.display="block";
var aLeft=a.style.left.substring(0,a.style.left.indexOf("px"));
menu.style.left=parseInt(aLeft)+10+"px";
var aTop=a.style.top.substring(0,a.style.top.indexOf("px"));
menu.style.top=parseInt(aTop)+30+"px";
clearTimeout(time);
}
function test2(){
var menu=document.getElementById("menu");
menu.style.display="none";
clearTimeout(time);
}
function test3(){
time=setTimeout('test2()',1000);
}
-->
</script>
<style type="text/css">
#menu{
width:100px;
height:200px;
background-color:#CCCCCC;
position:absolute;
display:none;
}
</style>
</head>
<body>
<a style="position:relative; left:300px;top:20px;" href="/#" id="a1" onmouseover="test()" onmouseout="test3()">链接</a>
<div id="menu" onmouseover="test()" onmouseout="test3()">
<a href="#">收货开单</a>
<br />
<a href="/blog/#">装车配送</a>
<br />
<a href="/#">客服查询</a>
</div>
</body>
</html>
参考：
菜单延时加载，并且一秒后消失
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Str
参考一：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script>
// Ceeate A div
function createDIV(text,id)
{
var o = document.getElementById(id);
var div = document.createElement("div");
div.id = id+1
div.innerHTML =text;
o.appendChild(div);
}
function doWhat(id)
{
createDIV("我是大笨猪,这是DIV里的内容，不能有href",id)
return false;
}
</script>
</head>
<body>
<a href="大笨猪呀" id="benzhu" onclick="return doWhat(this.id)">大笨猪呀</a><br />
需要实现<br />
<a href="大笨猪呀" id="benzhu" onclick="return doWhat(this.id)">大笨猪呀</a>
<div id="benzhu1">我是大笨猪,这是DIV里的内容，不能有href</div>
</body>
</html>
参考二：
js 鼠标经过 弹出菜单 延时隐藏
2010-12-06 16:16
?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title>
<script type="text/javascript">
<!--
var time;
function test(){
var a=document.getElementById("a1");
var menu=document.getElementById("menu");
menu.style.display="block";
var aLeft=a.style.left.substring(0,a.style.left.indexOf("px"));
menu.style.left=parseInt(aLeft)+10+"px";
var aTop=a.style.top.substring(0,a.style.top.indexOf("px"));
menu.style.top=parseInt(aTop)+30+"px";
clearTimeout(time);
}
function test2(){
var menu=document.getElementById("menu");
menu.style.display="none";
clearTimeout(time);
}
function test3(){
time=setTimeout('test2()',1000);
}
-->
</script>
<style type="text/css">
#menu{
width:100px;
height:200px;
background-color:#CCCCCC;
position:absolute;
display:none;
}
</style>
</head>
<body>
<a style="position:relative; left:300px;top:20px;" href="/#" id="a1" onmouseover="test()" onmouseout="test3()">链接</a>
<div id="menu" onmouseover="test()" onmouseout="test3()">
<a href="#">收货开单</a>
<br />
<a href="/blog/#">装车配送</a>
<br />
<a href="/#">客服查询</a>
</div>
</body>
</html>
参考：
菜单延时加载，并且一秒后消失
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Str
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
