[Node/dom] appendChild(),createElement(),removeChild()

Properties and Methods for working with Nodes

 

Node properties

-childNodes

-firstChild

-lastChild

-nextSibling

-parentNode

-previousSibling

 

Node methods

-appendChild()

-removeChild()

 

Document methods

-document.createElement()

-document.creaeTextNode()

 

HTML*Element properties

-innerHTML

-innerText

 

 

예제1

p태그를 만들어서 body앞에붙이고 p태그에 글씨를 써보자

//p태그만들기
let p = document.createElement('p');
//바디안에 p태그 집어넣기
document.body.appendChild(p)
//p태그에 글자넣기
p.innerText = 'hi'

 

예제2

<div>태그를 지워보자

<div>hi</div>

let div = document.querySelector('.div')
document.body.removeChild(div)

~Child의 경우 body가 빠지면 적용이안될수 있으니 주의하자.

 

 

See the Pen WNxeeJP by LeeEugene1 (@leeeugene1) on CodePen.