자바스크립트에 html태그 생성하고 적용하기(appenChild,insertBefore,innerHTML)-DOM

appenChild

querySelector를 이용해서 css에 쓰는것처럼 다양한 Selector를 이용해서 요소들을 DOM으로 추가,삭제,동적으로 만들수 있음 

=>자바스크립트에서 h2 태그를 만들고 class네임을 정해준 다음 <section>태그에 적용하기 위해

h2의 부모요소 section으로 해주기위해 appenChild를 사용해주면됨

 

appenChild를 쓰면 제일 끝부분에

이런식으로 위치가 되는데 

 

insertBefroe

이런식으로 중간에 위치하고 싶다면 insertBefore을 사용해주면됨

사용방법

삭제도 가능함

 

innerHTML

innerHTML을 이용하면 일일이 createElement를 이용해 setAttribute 하지않고 간편하게 쓸수  있지만 

H1태그 안에 있는 텍스트가 계속 변경해야 된다면 좋지않음

 

결론

많은 동작을 해야한다면 createElement를 사용해 주는게 좋고 

변경할일이 없다면 innerhtml을 이용해 주는것도 좋음