如何利用js向指定位置添加一个div层

一、如何利用js向指定位置添加一个div层

1、利用js代码首先创建一个div，document.createElement('div');

2、确认div添加位置，可以在某个dom元素后面，或者通过css属性控制具体位置，主要通过left/top等属性控制。

3、确定位置之后，显示div即可。

示例：比如html中有一个文本输入框，我们现在需要在挨着输入框右下角位置显示一个div。

<input type="text" id="city" value="beijing"/>

vardescDiv=document.createElement('div');

document.body.appendChild(descDiv);

vartext=document.getElementById('city');

varseatX=text.offsetLeft+text.offsetWidth;//横坐标

varseatY=text.offsetTop+text.offsetHeight;//纵坐标

//给div设置样式，比如大小、位置

varcssStr="z-index:5;width:420px;height:300px;background-color:#FFFF99;border:1pxsolidblack;position:absolute;left:"

+seatX+'px;top:'+seatY+'px;';

descDiv.innerHTML='这是一个测试的div显示的内容';

descDiv.style.display='block';

二、能不能把js代码放到div里面

1、JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。

2、HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

3、 DIV元素是用来为HTML（标准通用标记语言下的一个应用）文档内大块（block-level）的内容提供结构和背景的元素。

4、所以，js与DIV本身是没有关系的。

5、js可以操作DIV，增加DIV的动态效果。但是把js放到DIV里面，网页本身并没有这样的概念，也没有这样的功能。

三、JS如何添加删除div

document.createElement()是在对象中创建一个对象，要与appendChild()或 insertBefore()方法联合使用。

其中，appendChild()方法在节点的子节点列表末添加新的子节点。insertBefore()方法在节点的子节点列表任意位置插入新的节点。

//如果原来有“divCell”这个图层，先删除这个图层

var newdiv= document.createElement("divCell");

document.body.appendChild(newdiv);

//通过样式指定该div的位置方式,若是想要自己设置div的位置,这句话必须有,把它注释掉你就可以知道效果拉~试试看

newdiv.style.position="absolute";

//通过样式指定x坐标(随机数0~450)

newdiv.style.top= Math.round(Math.random()*450);

//通过样式指定y坐标(随机数0~700)

newdiv.style.left= Math.round(Math.random()*700);

//通过样式指定背景颜色,,若是背景图片例为 newdiv.style.backgroundImage="url(img/3.jpg)"

newdiv.style.backgroundColor="#ffffcc";

newdiv.style.filter="alpha(opacity=50)";

var my= document.getElementById("divCell");

my.parentNode.removeChild(my);