[javascript] HTML 태그 추가 및 삭제

공부하면서 정리한 내용입니다
참고한 내용은 맨 아래의 링크를 확인해주세요

---

추가

let newDIV = document.createElement("div");
newDIV.innerHTML = "새로 생성된 DIV입니다.";
newDIV.setAttribute("id","myDiv"); 
newDIV.style.backgroundColor="yellow";

// 결과 
<div id="myDiv" style="background-color:yellow"> 새로 생성된 DIV입니다. </div>

let newDIV = document.createElement("div");
newDIV.innerHTML = '<div id="myDiv" style="background-color:yellow"> 새로 생성된 DIV입니다. </div>';

// 결과 
<div id="myDiv" style="background-color:yellow"> 새로 생성된 DIV입니다. </div>

추가할 위치를 지정할 수 있음

El.insertAdjacentHTML("option", "추가할내용"); //El.innerHTML 대신 사용가능

// option 
"beforebegin" (directly before the current node)
"afterbegin" (inside the current node, at the beginning)
"beforeend" (inside the current node, at the end)
"afterend" (directly after the current node)

append() 와 appendChild()

appendChild() 를 이용하려면 textNode를 추가해야함

let el = document.createElement("p");
let text = document.createTextNode("텍스트"); // TextNode

el.appendChild(text);

appned는 textNode없이 추가가능

let el = document.createElement("p");

el.append("텍스트");

삭제

let myDiv = document.getElementById("myDiv"); 
let parent = myDiv.parentElement; // 부모 객체 알아내기 
parent.removeChild(myDiv);    // 부모로부터 myDiv 객체 제거하기

---

Reference

1) https://coding-restaurant.tistory.com/212

[JS] 자바스크립트 HTML 태그 요소 동적 추가 및 삭제

2) https://blogpack.tistory.com/682

append() 와 appendChild()의 차이