Javascript insertBefore로 요소 전으로 순서 바꾸기
2022. 3. 24. 17:26
가끔 리스트의 순서를 바꾸거나 특정한 element를 어떤 element 전에 삽입해야 하는 경우가 있다. 이럴 경우 유용하게 쓸 수 있는 것이 insertBefore이다
| (부모요소).insertBefore( 삽입/옮길 element, 기준 element) |
<코드>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.block{
border: dashed red;
max-width: 300px;
}
</style>
<script>
window.onload = ()=>{
let newBlock = document.getElementById("newBlock");
let block3 = document.getElementById("b3");
document.querySelector(".container").insertBefore(newBlock, block3);
}
</script>
</head>
<body>
<div>
<div class="container">
<div id="newBlock">new</div>
<div class="block" id="b1">1</div>
<div class="block" id="b2">2</div>
<div class="block" id="b3">3</div>
<div class="block" id="b4">4</div>
<div class="block" id="b5">5</div>
</div>
</div>
</body>
</html>
<결과>
'IT 족집게 > 개발' 카테고리의 다른 글
| css Document Element 요소 크기를 유동적으로 조절하기 (0) | 2022.03.25 |
|---|---|
| css box-shadow 사용 방법 (0) | 2022.03.25 |
| css 글자 크기 부모 요소에 따라가게 설정 (0) | 2022.03.24 |
| css 부모 요소 우측 상단에 위치 고정하기 (0) | 2022.03.24 |
| Referential integrity constraint violation 스프링 오류 해결법 (0) | 2022.03.15 |