참고: https://www.golinuxcloud.com/insertbefore-javascript/
insertBefore() 라는 DOM 메소드가 있습니다. 이를 사용하면 기존 요소 앞에 새로운 요소를 삽입할 수 있고 올바르게 사용하기 위해서는 다음 세가지를 지정해야합니다.
- 삽입하고자 하는 새로운 요소
- 위치를 지정해 줄 기존 요소
- 두 요소의 부모 요소
JavaScript insertBefore() 문법
다음은 문법입니다:
parentElement.insertBefore(newElement,targetElement)새 요소 삽입 시 부모 요소가 뭔지 모를 때도 있지만 몰라도 괜찮습니다. 왜냐하면 타겟 요소의 parentNode 속성을 사용하면 되기 때문입니다. 모든 요소 노드의 부모는 반드시 다른 요소 노드여야 합니다. (attribute 노드와 text 노드는 요소 노드를 자식으로 가질 수 없음)
예를 들어 id가 "imagegallery"인 이미지 갤러리 목록 앞에 placeholder 요소를 삽입하는 방법은 다음과 같습니다:
var gallery = document.getElementById("imagegallery");
gallery.parentNode.insertBefore(placeholder,gallery);현재 gallery의 parentNode는 body 요소입니다. placeholder 요소는 body 요소의 자식으로 삽입되고 형제 요소인 gallery 요소 앞에 삽입됩니다.
또한 description 요소를 형제 요소인 gallery 앞에 삽입할 수도 있습니다:
gallery.parentNode.insertBefore(description,gallery);placeholder 요소와 description 요소는 gallery 앞에 삽입되었습니다.
예제 1: insertBefore()를 사용해 새 노드 삽입
만일 특정 요소를 가지고 있고 거기에 새로운 요소를 추가하고자 한다면 insertBefore() 메소드가 제격입니다. insertBefore() 메소드를 사용하면 기준 노드 앞에 새 노드를 배치하게 되지만 삽입할 노드가 DOM에 이미 존재하는 노드인 경우 단순히 위치를 이동시켜줍니다.
insertBefore() 메소드는 지정한 자식 앞에 새 노드를 자식으로 삽입합니다. insertBefore()의 문법은 다음과 같습니다:
node.insertBefore(newnode, existingnode);이 메소드는 newnode, existingnode 두 개의 매개변수를 받습니다.
- newnode: 삽입할 노드
- existingnode: newnode를 앞에 삽입할 기준 노드
예를 들면 <div> 요소의 첫 번째 자식으로 <p> 요소를 삽입할 수 있습니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="myDiv">기존 콘텐츠의 위치</div>
</body>
<script>
const newnode = document.createElement("p");
newnode.innerHTML = "p는 기존 콘텐츠 앞에 위치 함";
const existingnode = document.getElementById("myDiv").firstChild;
document.getElementById("myDiv").insertBefore(newnode, existingnode);
</script>
</html>
예제 2: 새 요소를 특정 DOM 위치에 삽입
div 요소 내의 세 번째 단락 바로 앞에 새 단락을 삽입하고자 한다고 가정해보겠습니다. div 요소의 모든 단락을 가져오기 위해 getElementsByTagName() 같은 적당한 메소드를 사용해 세 번째 단락에 접근할 수 있습니다. 그 다음 createElement()와 insertBefore() DOM 메소드를 사용하여 현재 존재하는 세 번째 단락 앞에 새 단락을 삽입할 수 있습니다.
// id가 target인 div 얻기
const div = document.getElementById('target');
// div 내의 p 요소들 가져오기
const paras = div.getElementsByTagName('p');
// 새로 삽입할 단락 생성
const newPara = document.createElement('p');
const text = document.createTextNode('New paragraph content');
newPara.appendChild(text);
// 세 번째 단락이 존재 하면 그 앞에 삽입하고
// 없다면 div의 마지막에 새 단락 추가
if (paras[2]) {
div.insertBefore(newPara, paras[2]);
} else {
div.appendChild(newPara);
}document.createElement() 메소드는 페이지에 삽입하거나 추가할 HTML 요소를 생성합니다. 위의 예제에서는 insertBefore() 메소드를 사용해 새 p 요소를 기존의 단락 앞에 삽입했습니다.
위의 코드에서 우리는 기존 세 번째 단락 앞에 새 단락을 삽입하길 원하므로 div 요소의 p 목록을 가져와서 세 번째 단락이 있는지 확인한 다음 insertBefore()를 사용해 새 단락을 세 번째 단락 앞에 삽입했습니다. 만일 세 번째 단락이 없다면 appendChild()를 사용하여 div 요소의 끝에 새 단락을 추가합니다.
정리
다른 노드(요소) 앞에 새 노드를 삽입하기 위해서는 JavaScript의 insertBefore() 메소드를 사용할 수 있습니다. insertBefore() 메소드는 삽입할 노드와 기준 노드 두 개의 매개변수를 받습니다. 만일 두 번째 매개변수를 생략하면 insertBefore() 메소드는 appendChild() 처럼 동작합니다.
관련 글
'dev > javascript' 카테고리의 다른 글
| [javascript] HTML 웹 접근성 (Accessibility) (7) | 2023.05.11 |
|---|---|
| [javascript] 자바스크립트 getBoundingClientRect (size, position) (6) | 2023.05.10 |
| [javascript] 자바스크립트 배열 정렬 (array sort) (5) | 2023.05.04 |
| [javascript] 자바스크립트 랜덤으로 배열 섞기 (shuffle array) (6) | 2023.05.03 |
| [javascript] 자바스크립트 카운드다운 타이머 (countdown timer) (4) | 2023.05.03 |
댓글