이 예제는 HTML, CSS, 그리고 바닐라 JavaScript를 사용하여 DOM 요소를 복사하는 기능을 구현합니다.
바닐라js로 DOM 요소 복사하기
바닐라js로 DOM 요소 복사하기
위의 목차를 클릭하면 해당 글로 자동 이동 합니다.
DOM 복사해서 스타일 변경하여 붙여넣기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM 요소 복사 예제</title>
<style>
/* 원본 요소 스타일 */
.original {
width: 200px;
padding: 20px;
background-color: lightblue;
border: 2px solid blue;
margin-bottom: 20px;
text-align: center;
font-family: Arial, sans-serif;
}
/* 복사된 요소 스타일 */
.copied {
background-color: lightcoral;
border-color: red;
}
/* 버튼 스타일 */
button {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>DOM 요소 복사 예제</h1>
<!-- 원본 요소 -->
<div id="originalElement" class="original">
이 요소를 복사합니다!
</div>
<!-- 복사된 요소를 추가할 컨테이너 -->
<div id="copiedElementsContainer"></div>
<!-- 복사 버튼 -->
<button onclick="copyElement()">요소 복사</button>
<script>
// 요소 복사 함수
function copyElement() {
// 원본 요소 선택
const originalElement = document.getElementById('originalElement');
// 원본 요소를 복제 (깊은 복사)
const copiedElement = originalElement.cloneNode(true);
// 복사된 요소에 클래스 추가 (스타일 변경)
copiedElement.classList.add('copied');
// 복사된 요소를 컨테이너에 추가
const container = document.getElementById('copiedElementsContainer');
container.appendChild(copiedElement);
}
</script>
</body>
</html>
코드 설명
1) .HTML 구조
- 원본 요소: id="originalElement"로 지정된 <div> 요소가 복사 대상입니다.
- 복사된 요소를 추가할 컨테이너: id="copiedElementsContainer"로 지정된 <div> 요소에 복사된 요소가 추가됩니다.
- 복사 버튼: 버튼을 클릭하면 copyElement() 함수가 실행되어 요소를 복사합니다.
2. CSS 스타일
- 원본 요소: .original 클래스로 스타일이 지정되어 있습니다.
- 복사된 요소: .copied 클래스로 스타일이 지정되어 있으며, 원본 요소와 다른 색상으로 구분됩니다.
- 버튼: 버튼의 스타일을 간단히 지정했습니다.
3. JavaScript 기능
- cloneNode(true): 원본 요소를 깊은 복사합니다. true를 전달하면 하위 요소까지 모두 복사됩니다.
- classList.add(): 복사된 요소에 .copied 클래스를 추가하여 스타일을 변경합니다.
- appendChild(): 복사된 요소를 컨테이너에 추가합니다.
동작 방식
- 페이지 로드: 원본 요소가 화면에 표시됩니다.
- 버튼 클릭: "요소 복사" 버튼을 클릭하면 원본 요소가 복사되고, 복사된 요소가 컨테이너에 추가됩니다.
- 복사된 요소: 복사된 요소는 원본 요소와 동일한 내용을 가지지만, 배경색과 테두리 색상이 다르게 표시됩니다.
추가 기능
1. 복사된 요소에 고유 ID 부여
// 1번 기능 요소 삭제 기능
function copyElement() {
const originalElement = document.getElementById('originalElement');
const copiedElement = originalElement.cloneNode(true);
// 고유 ID 부여
copiedElement.id = `copiedElement_${Date.now()}`;
copiedElement.classList.add('copied');
const container = document.getElementById('copiedElementsContainer');
container.appendChild(copiedElement);
}- 복사된 요소에 고유한 ID를 부여하여 구분할 수 있습니다.
2. 복사된 요소 삭제 기능
// 2번 복사된 요소 삭제 기능
function copyElement() {
const originalElement = document.getElementById('originalElement');
const copiedElement = originalElement.cloneNode(true);
// 삭제 버튼 추가
const deleteButton = document.createElement('button');
deleteButton.textContent = '삭제';
deleteButton.onclick = () => copiedElement.remove();
copiedElement.appendChild(deleteButton);
copiedElement.classList.add('copied');
const container = document.getElementById('copiedElementsContainer');
container.appendChild(copiedElement);
}- 복사된 요소에 삭제 버튼을 추가하여 삭제할 수 있습니다.
결론
JavaScript를 사용하여 DOM 요소를 복사하고, 복사된 요소를 페이지에 추가하는 방법 및 추가 기능의 포함하여 DOM에 복사 및 삭제 기능의 방법을 알 수 있습니다.
반응형
'web 언어 > HTML5 & CSS & Javascript' 카테고리의 다른 글
| CSS - Type 선택자 사용 (0) | 2025.03.18 |
|---|---|
| HTML5 - 테이블(Table) 목록 표현 방법 (0) | 2025.03.18 |
| JS - 바닐라js로 eq() 선택자 사용 방법 (0) | 2025.03.17 |
| JS - 바닐라js로 hover 기능 구현 (0) | 2025.03.16 |
| JS - 바닐라js로 slideToggle 기능 구현 (0) | 2025.03.16 |