| 메서드 | 설명 |
| document.createElement(요소) | HTML 요소 생성 |
| document.createTextNode(요소) | text 삽입 |
| document.appendChild(요소) | HTML 요소 추가 |
| document.removeChild(요소) | HTML 요소 제거 |
| document.replaceChild(요소) | HTML 요소 대치 ( 교환) |
| document.write(text) | HTML_출력 스트림에 쓰기 |
: 주로 같이 사용됨
createElement()
이 메서드는 HTML요소를 생성한다. (생성만 하는 거라서 따로 출력해주어야한다.)
만약, HTML 요소가 텍스트를 포함하고 있다면 해당 요소에 텍스트를 삽입할 수 있도록 해야한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>createElement</title>
</head>
<body>
<p>create new button element with text</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
let btn = document.createElement("button");
let t = document.createTextNode("click me");
btn.appendChild(t);
document.body.appendChild(btn);
}
</script>
</body>
</html>
Try it 클릭하면 click me 버튼 무한대로 생성됨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>createElement2</title>
</head>
<body>
<p>create new p element with text, and append it to div</p>
<div id="myDIV">
first statement.
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
let para = document.createElement("p");
let t = document.createTextNode("add statements");
para.appendChild(t);
document.querySelector("#myDIV").appendChild(para);
}
</script>
</body>
</html>
removeChild()
이 메서드는 DOM 노드와 관련된 메서드이다.
removeChild(요소)는 웹페이지에서 지정된 HTML 요소의 자식 노드를 삭제한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>removeChild</title>
</head>
<body>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p>Remove the first item from the list</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
let list = document.querySelector("#myList");
let x = list.removeChild(list.children[0]);
}
</script>
</body>
</html>
appendChild()
이 메서드는 요소를 지정된 요소의 마지막 하위 노드로 추가한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>appendChild</title>
</head>
<body>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p>Append an item to the end of the list</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
let node = document.createElement("li");
let textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.querySelector("#myList").appendChild(node);
}
</script>
</body>
</html>
replaceChild()
이 메서드는 하위 노드를 새로운 노드로 교체한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>replaceChild</title>
</head>
<body>
<ul id="myList">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<p>Replace an item</p>
<button onclick="replaceFunction()">Try it</button>
<script>
function replaceFunction() {
let textnode = document.createTextNode("Water");
// 2가지로 사용가능함
// let item = document.querySelector("#myList").childNodes[1];
let item = document.querySelector("#myList").children[0];
item.replaceChild(textnode, item.childNodes[0]);
}
</script>
</body>
</html>
'웹 프로그래밍 기초 > DOM 문서객체' 카테고리의 다른 글
| document 컬렉션 (0) | 2025.04.11 |
|---|---|
| HTML 요소 검색하기 (0) | 2025.04.11 |
| HTML 요소 내용 변경하기 (0) | 2025.04.11 |
| HTML 요소 선택하기 (0) | 2025.04.11 |
| DOM (1) | 2025.04.11 |