insertafter 속성의 JQuery와 방법
- 정의 및 사용
예 :
<!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에 삽입 : 결과를 달성하기 위해 -
자바 스크립트에 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>
주
콘솔 출력을 이용하여 바디 자식 노드는 다음과 같이 삽입, DOM 노드는 여기 용이 :
HTML DOM 노드
자세한 내용은 다음을 참조하십시오 W3 스쿨 HTML DOM을 소개