728x90
자바스크립트 엘리먼트 (노드) 앞 뒤에 특정 엘리먼트 (노드) 삽입 하기
insertBefore / insertAdjacentElement
기본 형태
//기준 엘리먼트에 삽입할 엘리먼트를 옵션에 맞는 위치에 삽입
//옵션은 beforebegin, afterbegin, beforeend, afterend가 있고
//기준 노드의 앞, 뒤 추가는 beforebegin, afterend를 사용
//기준 노드의 자식 노드로 앞, 뒤 추가는 afterbegin, beforebegin을 사용한다
기준노드.insertAdjacentElement(옵션, 삽입할노드);
//기준 노드 앞에 추가할 노드 삽입
부모노드.insertBefore(추가할노드, 기준노드);
샘플 예제 : insertAdjacentElement
<!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>Insert Node Example</title>
</head>
<body>
<div class="container">
<h1>Hello</h1>
<h3>Insert Node Example</h3>
</div>
<script>
const container = document.querySelector('.container');
const refNode_h1 = document.querySelector('h1');
const refNode_h3 = document.querySelector('h3');
//새로운 노드 생성
const newNode = document.createElement('h2');
newNode.innerText = 'GoodMemory Tistory';
//h3 앞에 새로운 노드 추가 [아래 코드와 결과가 같음]
refNode_h3.insertAdjacentElement('beforebegin',newNode);
//h1 뒤에 새로운 노드 추가 [위 코드와 결과가 같음]
// refNode_h1.insertAdjacentElement('afterend',newNode);
</script>
</body>
</html>
실행 결과
샘플예제 : insertBefore
<!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>Insert Node Example</title>
</head>
<body>
<div class="container">
<h1>Hello</h1>
<h3>Insert Node Example</h3>
</div>
<script>
const container = document.querySelector('.container');
const refNode_h1 = document.querySelector('h1');
const refNode_h3 = document.querySelector('h3');
//새로운 노드 생성
const newNode = document.createElement('h2');
newNode.innerText = 'GoodMemory Tistory';
//h3 앞에 새로운 노드 추가
container.insertBefore(newNode,refNode_h3);
</script>
</body>
</html>실행 결과
728x90
'프론트엔드 > Javascript' 카테고리의 다른 글
| [Javascript] 엘리먼트 속성 추가하기 setAttribute (0) | 2021.05.24 |
|---|---|
| [Javascript] 엘리먼트 / 노드 / 태그 생성 createElement (0) | 2021.05.24 |
| [Javascript] 원하는 엘리먼트로 스크롤 이동 Element.scrollIntoView() (0) | 2021.05.23 |
| [Javascript] 마우스 이벤트 mouse event (0) | 2021.05.21 |
| [Javascript] 브라우저 윈도우 창 종료 이벤트 beforeunload / unload (0) | 2021.05.21 |
댓글