JS(7). DOM(3). DOM 조작 메서드

createElement()	새로운 HTML 요소를 생성합니다.	javascript<br>const div = document.createElement('div');<br>div.innerText = "Hello!";<br>
createTextNode()	HTML 요소 내부에 삽입할 텍스트 노드를 생성합니다.	javascript<br>const textNode = document.createTextNode("Hello World");<br>
appendChild()	부모 요소의 마지막 자식으로 새로운 요소를 추가합니다.	javascript<br>parent.appendChild(child);<br>
insertBefore()	특정 자식 요소 앞에 새 요소를 삽입합니다.	javascript<br>parent.insertBefore(newChild, referenceChild);<br>
removeChild()	부모 요소에서 특정 자식 요소를 제거합니다.	javascript<br>parent.removeChild(child);<br>
replaceChild()	부모 요소에서 특정 자식 요소를 새 요소로 교체합니다.	javascript<br>parent.replaceChild(newChild, oldChild);<br>
innerHTML	요소의 HTML 콘텐츠를 읽거나 설정합니다.	javascript<br>element.innerHTML = "<p>내용</p>";<br>
textContent	요소의 텍스트 콘텐츠를 읽거나 설정합니다.	javascript<br>element.textContent = "텍스트만 설정";<br>
setAttribute()	HTML 요소에 속성을 추가하거나 변경합니다.	javascript<br>element.setAttribute("class", "my-class");<br>
getAttribute()	HTML 요소의 특정 속성을 가져옵니다.	javascript<br>const value = element.getAttribute("id");<br>
removeAttribute()	HTML 요소에서 특정 속성을 제거합니다.	javascript<br>element.removeAttribute("class");<br>

1. createElement()

새로운 HTML 요소를 생성합니다.

const div = document.createElement('div');
div.innerText = "안녕하세요!";
document.body.appendChild(div); // <div>안녕하세요!</div>

const ul = document.createElement('ul'); // <ul></ul>

const li = document.createElement('li'); // <li></li>
li.innerText = "첫 번째 항목"; // <li>첫 번째 항목</li>
ul.appendChild(li); // <ul><li>첫 번째 항목</li></ul>

document.body.appendChild(ul); // 페이지에 추가

2. createTextNode()

텍스트 노드를 생성하여 HTML 요소 내부에 삽입합니다.

일반적으로 innerText나 textContent를 사용하는 것이 더 간편하므로 많이 사용되지 않습니다.

const textNode = document.createTextNode("Hello World");
const div = document.createElement('div');
div.appendChild(textNode); // <div>Hello World</div>
document.body.appendChild(div);

3. appendChild()

부모 요소의 마지막 자식으로 새로운 요소를 추가합니다.

const parentDiv = document.createElement('div');
const childDiv = document.createElement('div');
childDiv.innerText = "자식 요소";
parentDiv.appendChild(childDiv); // <div><div>자식 요소</div></div>
document.body.appendChild(parentDiv);

4. insertBefore()

특정 요소 앞에 새 요소를 삽입합니다.

const ul = document.createElement('ul');
const li1 = document.createElement('li');
li1.innerText = "첫 번째 항목";

const li2 = document.createElement('li');
li2.innerText = "두 번째 항목";

ul.appendChild(li2); // <ul><li>두 번째 항목</li></ul>
ul.insertBefore(li1, li2); // <ul><li>첫 번째 항목</li><li>두 번째 항목</li></ul>
document.body.appendChild(ul);

5. removeChild()

부모 요소에서 특정 자식 요소를 제거합니다.

const parentDiv = document.createElement('div');
const childDiv = document.createElement('div');
childDiv.innerText = "자식 요소";

parentDiv.appendChild(childDiv); // <div><div>자식 요소</div></div>
document.body.appendChild(parentDiv);

// 자식 요소 제거
parentDiv.removeChild(childDiv); // <div></div>

6. replaceChild()

특정 자식 요소를 새 요소로 교체합니다.

const parentDiv = document.createElement('div');
const oldChild = document.createElement('div');
oldChild.innerText = "기존 요소";

const newChild = document.createElement('div');
newChild.innerText = "새로운 요소";

parentDiv.appendChild(oldChild);
parentDiv.replaceChild(newChild, oldChild); // <div><div>새로운 요소</div></div>
document.body.appendChild(parentDiv);

7. 기타: innerHTML, textContent, setAttribute

innerHTML

• 요소 내부의 HTML 콘텐츠를 추가하거나 수정할 때 사용.

element.innerHTML = "<p>HTML로 추가</p>";

textContent

• 텍스트만 추가하거나 수정할 때 사용.

element.textContent = "텍스트만 추가";

setAttribute()

• 속성을 추가하거나 수정.

element.setAttribute("class", "highlight");