JavaScript实现JQuery的insertAfter功能
程序员文章站
2024-01-23 13:21:10
JQuery的insertAfter方法 定义和用法 实例： 实现结果：div_1插入到div_3之后 JavaScript的insertBefore()方法 定义和用法 实例： 注意 body的子节点在控制台输出方便插入使用，此处的DOM节点如下： HTML中的DOM节点 详细参见： "w3cSc ......
jquery的insertafter方法
- 定义和用法
实例：
<!doctype html>
<html>
<style>
body{
background-color:gray;
}
div{
height:30px;
width:100px;
margin:auto;
}
input{
height:30px;
width:100px;
display:block;
margin:auto;
}
#div_1{
background-color:green;
}
#div_2{
background-color:yellow;
}
#div_3{
background-color:red;
}
</style>
<body>
<div id="div_1">我是盒子1</div>
<div id="div_2">我是盒子2</div>
<div id="div_3">我是盒子3</div>
<input value="jquery" type="button" onclick="jqcheck()"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script>
function jqcheck(){
$("#div_1").insertafter("#div_3");
}
</script>
</body>
</html>
- 实现结果：div_1插入到div_3之后
javascript的insertbefore()方法
- 定义和用法
实例：
<body>
<div id="div_1">我是盒子1</div>
<div id="div_2">我是盒子2</div>
<div id="div_3">我是盒子3</div>
<input value="javascript" type="button" onclick="jscheck()"/>
<script>
divs= document.getelementbyid("div_1");
body = document.getelementsbytagname("body");
function jscheck(){
console.log(body[0].childnodes);
//在控制台输出body下的子节点
body[0].insertbefore(divs,body[0].childnodes[5]);
}
</script>
</body>
注意
body的子节点在控制台输出方便插入使用，此处的dom节点如下：
html中的dom节点
上一篇： Hadoop_简介_01
推荐阅读