如何利用js向指定位置添加一个div层
RT，利用html链接的一个外部js 在页面指定位置添加一个div层
<html>
<body>
<div class="1">
<div class=2>123</div>
<div class=2 id="a">234</div>
</div>
</body>
</html>
如上代码 将<div class=3 id=b>798</div>这个div层插入到id为a的div层前面.
1、利用js代码首先创建一个div，document.createElement('div');
2、确认div添加位置，可以在某个dom元素后面，或者通过css属性控制具体位置，主要通过left/top等属性控制。
3、确定位置之后，显示div即可。
示例：比如html中有一个文本输入框，我们现在需要在挨着输入框右下角位置显示一个div。
<input type="text" id="city" value="beijing"/>
方法：
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';
}
温馨提示：内容为网友见解，仅供参考
第1个回答 2014-07-27
把外链接的JS加载到body后面，在这个JS里面用类似这样的代码：
var div = document.createElement('div'); // 新增元素var diva = document.getElementById('a'); // 获取id为a的元素
diva.parentNode.insertBefore(div, diva); // 在这个元素前面增加上去追问
外链的代码 放在head头里面就不行了么？必须放在body后面？
追答放在head里面的话就要延迟调用（比如在document.body.onload事件里调用）
否则直接在head里面引入，这时候div对象还不存在，是取不到的。
明白了 感谢
本回答被提问者采纳第2个回答 2015-11-27
引用用jQuery会快一点，然后使用如下代码（可以修改对应的id和文字）
$("#targetLoc").append("<div>sample text</div>");
这个代码是帮你直接定位到指定的位置，然后后面添加div。
这个就可以达到你需要的目的了。
$("#targetLoc").append("<div>sample text</div>");
这个代码是帮你直接定位到指定的位置，然后后面添加div。
这个就可以达到你需要的目的了。
第3个回答 2018-03-30
把外链接的JS加载到body后面，在这个JS里面用类似这样的代码：
- var div = document.createElement('div'); // 新增元素
var diva = document.getElementById('a'); // 获取id为a的元素diva.parentNode.insertBefore(div, diva); // 在这个元素前面增加上去
第4个回答 2015-11-14
DOM提供了一个insertBefore方法用于在一个元素前面插入另一个元素。
下面我举一个例子：
<!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>demo of insertBefore</title>
<head/>
<body>
<div id="PrintDiv">
<h1 id = "myh1">welcome to my homepage </h1>
<p id="myp">paragrahp 1</p>
<p id="myp">paragrahp 2</p>
</div>
<input type="button" id="PrintButton" value="app start button" >
<script type="text/javascript">
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);
<script>
</body>
</html>
123
相似回答
