3.1 요소 생성
DOM (Document Object Model)을 다루는 작업은 기존 요소를 탐색하는 것뿐만 아니라 새로운 요소를 생성하고 문서에 삽입하고 삭제하는 것도 포함돼. 지금부터 DOM에서 요소를 생성하고 삭제하는 다양한 방법과 접근법을 살펴볼게.
메소드 document.createElement()
DOM에서 새로운 요소를 만드는 기본 메소드는 document.createElement()야. 이 메소드는 생성하려는 요소의 태그 이름을 받고, 새로운 빈 요소를 반환해.
예시:
const newDiv = document.createElement('div');
요소에 내용 추가하기
새로운 요소를 생성한 후에는 내용을 채울 수 있지. 텍스트, 다른 요소 또는 그 둘의 조합이 될 수 있어.
예시:
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
innerHTML 속성을 사용하여 HTML 콘텐츠를 추가할 수도 있어.
예시:
const newDiv = document.createElement('div');
newDiv.innerHTML = '<strong>This is a new div element with bold text</strong>';
3.2 DOM에 요소 삽입하기
생성된 요소를 문서에 추가해야 해. DOM에 요소를 삽입하는 여러 방법이 있어:
1. 메소드 appendChild()
appendChild() 메소드는 지정된 부모 요소의 자식 요소 목록 끝에 요소를 추가해.
예시:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.appendChild(newDiv);
2. 메소드 insertBefore()
insertBefore() 메소드는 부모 요소의 지정된 자식 요소 앞에 요소를 추가해.
예시:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is a old div element</div>
<p>This is a paragraph</p>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
const referenceElement = document.querySelector('p');
body.insertBefore(newDiv, referenceElement);
3. 메소드 append()
append() 메소드는 하나 이상의 노드 또는 문자열을 지정된 부모 요소의 자식 요소 목록 끝에 추가해.
예시:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.append(newDiv);
4. 메소드 prepend()
prepend() 메소드는 하나 이상의 노드 또는 문자열을 지정된 부모 요소의 자식 요소 목록 시작에 추가해.
예시:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is an old div element</div>
</body>
</html>
const newDiv = document.createElement('div');
newDiv.textContent = 'This is a new div element';
const body = document.querySelector('body');
body.prepend(newDiv);
3.3 요소 복제하기
cloneNode() 메소드는 요소를 복제할 수 있어. 복제는 모든 자식 요소를 복사하는 깊은 복제와 요소 자체만 복사하는 얕은 복제가 있어.
깊은 복제 예시:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(true);
document.body.appendChild(clonedDiv);
얕은 복제 예시:
<html>
<head>
<style>
div {
padding: 5px;
min-height: 50px;
color: #fff;
border-bottom: 1px solid lightblue;
background: mediumpurple;
}
</style>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const originalDiv = document.querySelector('div');
const clonedDiv = originalDiv.cloneNode(false);
document.body.appendChild(clonedDiv);
요소 <div> 자체는 복제됐어, 스타일 덕분에 보일 거야. 그러나 자식 요소들 (텍스트 노드 "This is a div element" 및 <ul>)은 복제되지 않았어.
3.4 요소 삭제
1. 메소드 removeChild()
removeChild() 메소드는 부모 요소에서 자식 요소를 삭제해.
예시:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
const child = document.querySelector('p');
parent.removeChild(child);
2. 메소드 remove()
remove() 메소드는 요소를 DOM에서 직접 삭제해.
예시:
<html>
<head>
<title>Document</title>
</head>
<body>
<div>This is a div element</div>
<p>This is a paragraph</p>
</body>
</html>
const element = document.querySelector('div');
element.remove();
3. 요소의 내용 삭제하기
innerHTML 메소드를 사용하여 요소의 모든 내용을 삭제할 수 있어, 빈 문자열을 대입하면 돼.
예시:
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
</div>
</body>
</html>
const element = document.querySelector('div');
element.innerHTML = '';
4. 모든 자식 요소 삭제하기
모든 자식 요소를 삭제하려면 루프 또는 innerHTML 메소드를 사용할 수 있어.
루프 사용 예시:
<html>
<head>
<title>Document</title>
</head>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
</div>
</body>
</html>
const parent = document.querySelector('div');
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
innerHTML 사용 예시:
<html>
<head>
<title>Document</title>
<style>
div {
min-height: 200px;
background: bisque;
}
</style>
</head>
<body>
<div>
This is a div element
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>
<ul>
<li>Element 1</li>
<li>Element 2</li>
<li>Element 3</li>
</ul>
</div>
</body>
</html>
const parent = document.querySelector('div');
parent.innerHTML = '';
GO TO FULL VERSION