如何利用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层前面.

举报该问题

推荐答案 2015-12-06

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';
}

温馨提示：答案为网友推荐，仅供参考

当前网址：http://22.wendadaohang.com/zd/C6hf6hhC00TChCThffh.html

其他回答

第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。
这个就可以达到你需要的目的了。

第3个回答 2018-03-30

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

本回答被网友采纳

第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

1 2 下一页

相似回答

大家正在搜