[DOM] Update

update 변경, 갱신

DOM을 이용하여 HTML Element를 변경한다

 

const oneDiv = document.createElement('div');
console.log(oneDiv)  //  <div></div>

oneDiv라는 이름의 <div>요소를 만들었다

 

1. 문자열을 입력한다

textContent를 이용해서 비어있는 div element에 문자열을 입력한다.

oneDiv.textContent = 'dev';
console.log(oneDiv)    //  <div>dev</div>

 

2. class를 추가한다.

css스타일링이 적용될수 있도록, div element에 class를 추가한다.

oneDiv.classList.add('tweet')
console.log(oneDiv)   //   <div class="tweet">dev</div>

---

다시 append를 이용해 container의 자식요소로 추가한다.

const container = document.querySelector('#container')
container.append(oneDiv)

---

# class삭제하기

div.classList.remove('visible')

# class교체하기

div.classList.replace('info', 'warning')

# element에 속성추가

element.setAttribute(속성명, 속성값)

---

#텍스트 수정방법
textContent, innerHTML
근데 해킹방지를 위해 textContent써라

---

# document.cloneNode는 생성하는 메서드가 아니라 복제하는 메서드이다.
document.importNode는 template을 활용하여 내용을 붙여 넣을때 사용하는 메서드이다.