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

回答1：

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

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

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

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

方法：

function createDiv(){
    //首先创建div
    var descDiv = document.createElement('div');
    document.body.appendChild(descDiv);
    //获取输入框dom元素
    var text = document.getElementById('city');
    //计算div的确切位置
    var seatX = text.offsetLeft + text.offsetWidth;//横坐标
    var seatY = text.offsetTop + text.offsetHeight;//纵坐标
    //给div设置样式，比如大小、位置
    var cssStr = "z-index:5;width:420px;height:300px;background-color:#FFFF99;border:1px solid black;position:absolute;left:" 
    + seatX + 'px;top:' + seatY + 'px;';
    //将样式添加到div上，显示div
    descDiv.style.cssText = cssStr;
    descDiv.innerHTML = '这是一个测试的div显示的内容';
    descDiv.id = 'descDiv';
    descDiv.style.display = 'block';
}

回答2：

把外链接的JS加载到body后面，在这个JS里面用类似这样的代码：

var div = document.createElement('div'); // 新增元素
var diva = document.getElementById('a'); // 获取id为a的元素
diva.parentNode.insertBefore(div, diva); // 在这个元素前面增加上去

回答3：

引用用jQuery会快一点，然后使用如下代码（可以修改对应的id和文字）
$("#targetLoc").append("

sample text

");

这个代码是帮你直接定位到指定的位置，然后后面添加div。
这个就可以达到你需要的目的了。

回答4：

把外链接的JS加载到body后面，在这个JS里面用类似这样的代码：

var div = document.createElement('div'); // 新增元素
var diva = document.getElementById('a'); // 获取id为a的元素
diva.parentNode.insertBefore(div, diva); // 在这个元素前面增加上去

回答5：

DOM提供了一个insertBefore方法用于在一个元素前面插入另一个元素。

下面我举一个例子：





demo of insertBefore



welcome to my homepage  
paragrahp 1

paragrahp 2

var old_div=document.getElementById("PrintButton");
   var parent=old_div.parentNode;//找到old_div的parent
   var new_div=document.createElement("div");
   var new_txt=document.createTextNode("随便写点内容，你也可以将这个字符串赋值该一个变量");
   new_div.appendChild(new_txt);
   parent.insertBefore(new_div,old_div);
   //alert(new_div.innerHTML);