(1) UPDATE - textContent, classList.add

• 1. textContent 를 사용해서, 비어있는 div 엘리먼트에 문자열을 입력합니다.

const oneDiv = document.createElement('div')

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

• 2. CSS 스타일링이 적용될 수 있도록, div 엘리먼트에 class를 추가합니다.

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

• 3. 이번에는 append를 이용해 container의 자식 요소로 추가합니다.

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

• 4. 정리

const oneDiv = document.createElement('div') // div 엘리먼트 생성
oneDiv.textContent = 'dev' // div 엘리먼트에 dev 입력

oneDiv.classList.add('tweet') // class 추가 한다.

const container = document.querySelector('#container') // 컨테이너 호출

container.append(oneDiv) 컨테이너의 자식요소로 추가한다.

oneDiv
<div class="tweet">dev</div>

• class와 id 말고는 다른 attribute를 추가할 수는 없나요?

  -> setAttribute 라는 메소드를 검색해보세요.

(2)DELETE - remove, removeChild

• 1. 먼저 삭제하려는 엘리먼트의 위치를 알고 있는 경우에 사용하는 방법입니다. 앞서 생성하고 추가한 tweetDiv 를 삭제합니다. remove 메소드를 사용하세요.

const container = document.querySelector('#container')
const tweetDiv = document.createElement('div')
container.append(tweetDiv)
tweetDiv.remove() // 이렇게 append 했던 엘리먼트를 삭제할 수 있다.

• 2. 여러 개의 자식 엘리먼트를 지우려면, 어떻게 해야 할까요? innerHTML 을 이용하면, 아주 간단하게 모든 자식 엘리먼트를 지울 수 있습니다.

document.querySelector('#container').innerHTML = '';

->삭제후

Element.innerHTML

• 보안에 문제가 있어서 권장하지 않는다.

  • 경고: 프로젝트가 보안 점검을 거치게 되는 프로젝트인 경우, innerHTML 을 사용하면 코드가 거부 될 가능성이 높습니다. 예를 들어, 브라우저 확장에서 innerHTML을 사용하고 addons.mozilla.org에 확장을 제출하면 자동 검토 프로세스를 통과하지 못합니다.

• 3. removeChild 는 자식 엘리먼트를 지정해서 삭제하는 메소드입니다. 모든 자식 엘리먼트를 삭제하기 위해, 반복문(while, for, etc.)을 활용할 수 있습니다. 다음의 코드는 자식 엘리먼트가 남아있지 않을 때까지, 첫 번째 자식 엘리먼트를 삭제하는 코드입니다.
  while (container.firstChild) { container.removeChild(container.firstChild); }

const container = document.querySelector('#container');
while (container.firstChild) {
  container.removeChild(container.firstChild);
}

• 4. container의 자식 엘리먼트가 1개만 남을 때까지, 마지막 자식 엘리먼트를 제거합니다.
  while (container.children.length > 1) { container.removeChild(container.lastChild); }

const container = document.querySelector('#container');
while (container.children.length > 1) {
  container.removeChild(container.lastChild);
}

• 5. 클래스 이름이 tweet인 엘리먼트만 찾아서 제거합니다.

const tweets = document.querySelectorAll('.tweet')
tweets.forEach(function(tweet){
    tweet.remove();
})
// or
for (let tweet of tweets){
    tweet.remove()
}

(3)Further Study

• 아래 키워드에 대해서 직접 검색하여 학습하세요.

• element와 node의 차이 (difference between element and node in javascript dom)

• children과 childNodes의 차이 (difference between children and childNodes in javascript dom)

• removeChild와 remove의 차이 (difference between removeChild and remove in javascript dom)

• tweets에 forEach는 되는데, reduce는 안되는 이유 (why array method is not working on nodelist)

• tweets를 유사 배열에서 배열로 바꾸는 방법 (how to convert nodelist into javascript array)