insertBefore()
자바스크립트에서 DOM을 조작하는 메서드 중 하나로
특정 요소를 다른 요소 앞에 삽입할 수 있는 코드.
parentNode.insertBefore(newNode, referenceNode);
parentNode 요소를 추가할 부모 노드
newNode 새롭게 추가하고 싶은 노드
referenceNode newNode를 넣을 위치를 기준으로 할 때 해당 위치의 요소
HTML 코드
<body>
<ul id="itemList">
<li>item1</li>
<li>item3</li>
</ul>
</body>
JS 코드
//부모 노드 가져오기
const itemList = document.getElementById('itemList');
//새로운 리스트 아이템 만들기
const newItem = document.createElement('li');
newItem.textContent = "item2";
//item3 요소 가져오기
const referenceNode = itemList.querySelector('li:nth-Child(2)');
//새로운 리스트 아이템 item3 앞에 넣기
itemList.insertBefore(newItem, referenceNode);
JS코드 적용한 결과 화면
'02_STUDY > JavaScript' 카테고리의 다른 글
| [ JavaScript ] 논리연산자(&&, ||)를 활용한 단축평가 (0) | 2023.08.28 |
|---|---|
| [ JavaScript ] Truthy와 Falsy (0) | 2023.08.28 |
| [ JavaScript ] insertBefore()보다 더 편리하게 쓸 수 있는 insertAdjacentElement(), 특정 위치에 요소 추가하기 (0) | 2023.08.04 |
| [ JavaScript ] DOM(Document Object Model) 과 node에 대해서 (0) | 2023.02.12 |
| [ JavaScript ] JS 스크롤 이동하기, scrollBy(현위치, 만큼)와 scrollTo(전체, 까지)의 차이 (0) | 2023.02.11 |
