[Javascript] 요소 생성,삽입,삭제 메서드

요소 생성하기/삭제하기

노드 생성 메서드

✔️ document.createElement('tag') : 태그 이름을 사용해 새로운 요소를 만듬.

 

노드 복제 메서드

✔️ elem.cloneNode(deep) : 요소를 복제함.

 

노드 삽입 메서드

✔️ node.append() : 노드나 문자열을 해당 자식중 맨 끝에 삽입

✔️ node.prepend() : 노드나 문자열을 해당 자식 중 맾에 삽입

✔️ node.before() : 노드나 문자열을 node 이전에 삽입

✔️ node.after() : 노드나 문자열을 node 다음에 삽입

 

📌 insertAdjacentHTML/Text/Element 로 더 가편하게 노드를 삽입할 수 있는데 브라우저, 모바일 지원이 약함.

 

 

삭제 메서드

 

✔️ node.remove() : 노드 삭제

// 1초 뒤 노드 삭제하기

let div = document.createElement('div');
div.className = "alert";
div.innerHTML = "<strong>안녕하세요!</strong> 중요 메시지를 확인하셨습니다."

document.body.append(div);
setTimeout(() => div.remove(),1000);

 

Reference

• https://ko.javascript.info/modifying-document