JavaScript 로 Html 요소 생성하기

💭 querySelector()는 Element 인터페이스의 메소드로, CSS 선택자에 매치되는 하나 이상의 element 중 첫 번째 항목을 반환해준다.

 

 💭 createElement()는 객체에 메소드를 실행하여 메모리상에 인수 값을 넣어주고, 그 값을 생성한 변수에 넣어줄 수 있다.

 

 💭 addEventListener(’click’ , ) 는 페이지 상에서 클릭할때마다 특정 이벤트를 발생시킨다.

 

 💭 appendChild()는 html 구조에는 존재하지 않는 요소를 자바스크립트를 활용하여 넣어줄 수 있다.

 

ul태그만 존재하는 html 에서 js 를 활용하여 li 요소 만들어 출력하기

html 상의 ul 태그에 해당하는 요소를 찾아준다.

const ulEl = document.querySelector('ul')

 

 

li 태그를 생성한 후 넣고싶은 값을 보관한다.

for (let i = 0; i < 10 ; i += 1) {
  const li = document.createElement('li')  // createElement 메소드를 활용하여인수로 li 를 넣으면 메모리상에 li 태그를 만들어 변수 li 대입한다.
  li.textContent = `list-${i + 1}` //li 태그의 textContent 에 값 대
}

ulEl.appendChild(li) // html 상엔 존재하지 않는 요소를 자바스크립트를 통해 생성한다.

조건문 생성

if ((i + 1) % 2 === 0) {
    li.addEventListener('click' , function() {
      console.log(li.textContent) //li태그가 가지고 있는 텍스트컨텐트 출력
    }) // 짝수인 경우에만 출력

 

결과

짝수인 값을 눌렀을때에만 click 이벤트가 발생하여 콘솔창에 출력된다.