document.write()不覆盖其它元素,该怎么解决
日期：2014-05-18 浏览次数：20510 次
document.write()不覆盖其它元素
我在一个按钮事件中用，
document.write("<div>xx<div>");
向界面输出一个层，结果把界面上的所有元素覆盖了，如何不覆盖以前的元素呢？
------解决方案--------------------
指定div的大小，位置或者层
------解决方案--------------------
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html >
<head >
<title > New Document </title >
<meta http-equiv="Content-Type" content="text/html" charset="gb2312" >
</head >
<body leftmargin=0 topmargin=0 >
<div id="bgLayer" style="position:absolute;background:#CCCCCC;top:0px;width:100%;height:100%;filter:alpha(style=0,opacity=50);display:none;z-index:9998;" > </div >
<div id="topLayer" style="position:absolute;background:#999999;top:0px;width:420px;height:150px;display:none;z-index:9999;" >
<table width=100% height=100% bgcolor="#FFFFFF" style="position:relative;top:-5px;left:-5px;border:solid #999999 1px;" >
<tr >
<td > <center > <input type="button" value="确 定" onclick="javaScript:hideEdit();" > </center > </td >
</tr >
</table >
</div >
<br > <br > <br >
<p >
<center >
<input type="button" value="显 示" onclick="javaScript:showEdit();" >
</center >
<script language="JavaScript" >
<!--
function showEdit(id){
document.all["bgLayer"].style.display="";
document.all["bgLayer"].style.height=document.body.scrollHeight;
document.all["topLayer"].style.display="";
timer=setInterval(move,"50");
}
function hideEdit(){
clearInterval(timer);
document.all["bgLayer"].style.display="none";
document.all["topLayer"].style.display="none";
}
function move(){
document.all["topLayer"].style.top=document.body.scrollTop+document.body.clientHeight/2-110;
document.all["topLayer"].style.left=document.body.scrollLeft+document.body.clientWidth/2-200;
}
//-- >
</script >
</body >
</html >
------解决方案--------------------
你肯定会覆盖啦,(z-index:0)
要不覆盖,设置具体位置和大小.
------解决方案--------------------
建议楼主不要使用document.write()方法来建立一个新元素节点
因为MIME类型application/xhtml+xml与document.write()方法不兼容性,浏览器在呈现这种Xhtml文档时根本不会执行document.write()方法.
建立采用采用DOM方法建立一个新元素节点,同时也可以避免LZ所说的问题
参考
var layer=document.createElement("div");
var txt=document.createTextNode("div里面放置的内容");
layer.setAttribute("id","WndName");
layer.appendChild(txt);
document.body.appendChild(layer);
------解决方案--------------------
不要在函数中使用document.write,要不你整个页面就只有document.write所输出的代码了.
同意5楼
------解决方案--------------------
用这个！！！
var str="要写的字符串";
var Div=document.getElementById("div");
Div.insertAdjacentHTML("beforeEnd",str);
------解决方案--------------------
.innerHTML="<div>xx</div>";
我在一个按钮事件中用，
document.write("<div>xx<div>");
向界面输出一个层，结果把界面上的所有元素覆盖了，如何不覆盖以前的元素呢？
------解决方案--------------------
指定div的大小，位置或者层
------解决方案--------------------
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html >
<head >
<title > New Document </title >
<meta http-equiv="Content-Type" content="text/html" charset="gb2312" >
</head >
<body leftmargin=0 topmargin=0 >
<div id="bgLayer" style="position:absolute;background:#CCCCCC;top:0px;width:100%;height:100%;filter:alpha(style=0,opacity=50);display:none;z-index:9998;" > </div >
<div id="topLayer" style="position:absolute;background:#999999;top:0px;width:420px;height:150px;display:none;z-index:9999;" >
<table width=100% height=100% bgcolor="#FFFFFF" style="position:relative;top:-5px;left:-5px;border:solid #999999 1px;" >
<tr >
<td > <center > <input type="button" value="确 定" onclick="javaScript:hideEdit();" > </center > </td >
</tr >
</table >
</div >
<br > <br > <br >
<p >
<center >
<input type="button" value="显 示" onclick="javaScript:showEdit();" >
</center >
<script language="JavaScript" >
<!--
function showEdit(id){
document.all["bgLayer"].style.display="";
document.all["bgLayer"].style.height=document.body.scrollHeight;
document.all["topLayer"].style.display="";
timer=setInterval(move,"50");
}
function hideEdit(){
clearInterval(timer);
document.all["bgLayer"].style.display="none";
document.all["topLayer"].style.display="none";
}
function move(){
document.all["topLayer"].style.top=document.body.scrollTop+document.body.clientHeight/2-110;
document.all["topLayer"].style.left=document.body.scrollLeft+document.body.clientWidth/2-200;
}
//-- >
</script >
</body >
</html >
------解决方案--------------------
你肯定会覆盖啦,(z-index:0)
要不覆盖,设置具体位置和大小.
------解决方案--------------------
建议楼主不要使用document.write()方法来建立一个新元素节点
因为MIME类型application/xhtml+xml与document.write()方法不兼容性,浏览器在呈现这种Xhtml文档时根本不会执行document.write()方法.
建立采用采用DOM方法建立一个新元素节点,同时也可以避免LZ所说的问题
参考
var layer=document.createElement("div");
var txt=document.createTextNode("div里面放置的内容");
layer.setAttribute("id","WndName");
layer.appendChild(txt);
document.body.appendChild(layer);
------解决方案--------------------
不要在函数中使用document.write,要不你整个页面就只有document.write所输出的代码了.
同意5楼
------解决方案--------------------
用这个！！！
var str="要写的字符串";
var Div=document.getElementById("div");
Div.insertAdjacentHTML("beforeEnd",str);
------解决方案--------------------
.innerHTML="<div>xx</div>";
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
