如何利用js向指定位置添加一个div层
RT，利用html链接的一个外部js在页面指定位置添加一个div层<html><body><divclass="1"><divclass=2>123</div><divc...
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层前面. 展开
<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层前面. 展开
6个回答
展开全部
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';
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把外链接的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对象还不存在，是取不到的。
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
引用用jQuery会快一点，然后使用如下代码（可以修改对应的id和文字）
$("#targetLoc").append("<div>sample text</div>");
这个代码是帮你直接定位到指定的位置，然后后面添加div。
这个就可以达到你需要的目的了。
$("#targetLoc").append("<div>sample text</div>");
这个代码是帮你直接定位到指定的位置，然后后面添加div。
这个就可以达到你需要的目的了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把外链接的JS加载到body后面，在这个JS里面用类似这样的代码：
- var div = document.createElement('div'); // 新增元素
- var diva = document.getElementById('a'); // 获取id为a的元素
- diva.parentNode.insertBefore(div, diva); // 在这个元素前面增加上去
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
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
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
