자바스크립트에서 html 요소 생성하기 1탄

비슷하게 반복되는 HTML 코드를 작성하면서 자바스크립트 for loop 처럼 분명 간단하게 할 수 있는 방법이 있을 것 같단 생각이 든다

사실 저 정도 코드는 복붙해도 괜찮을 것 같은데 

 

앞으로 추가적으로 소스, 고기, 야채, 과일, 음료 등등 웬만한 식료품들 쫙 나열하려고 하는데 복붙해서 하려고 하니 한숨이 나오는... 

 

자바스크립트에서 for (let i = 어쩌고 저쩌고 하면서 같은 동작을 여러번 하게 하거나 여러 태그에 같은 동작을 넣거나 하는 것과

자바스크립트에서 html 을 생성하는 것은 해봤지만 HTML 코드 자체를 반복문을 이용해서 작성해 본 적은 없다 

아마 두 가지를 혼합해서 사용하면 되지 않을까.. 

 

프레임워크를 사용하면 쉽게 할 수 있다는 것 같은데 이 포트폴리오를 만드는 목적은 Plain, 바닐라 자바스크립트를 연습하려고 하는 것이기 때문에 머리 깨져도 걍 해보자 

 

 

✅ JavaScript 에서 html 요소 생성하는 법

[예시]

온라인 강의에서 배웠을 때는 .innerHTML 을 사용했었는데 사실 한 번 해본 걸로는 기억이 남지 않는다.. 

웹 표준에 대한 개발 문서들이 있는 MDN 사이트에서 다시 한 번 확인해 보았다

 

document.body.onload 선언하는 것이 필수인지 모르겠다 

.onload 는 또 뭘 의미하는 거지?

 

구글링 해보니 html 생성할 때 onload 를 주는 것이 필수는 아닌 것 같다 

 

왜 document.body.onload 를 쓰는 걸까? onload 이벤트를 사용하는 이유는 웹페이지가 완전히 로드 된 후에 스크립트를 실행하게 하기 위해서라는데  

그렇다면 내가 작성한 html 코드들이 먼저 쫙~ 뜨고 그 다음에 스크립트에서 생성한 코드가 뜬다는 것인가? 

구글링을 해 봐도 궁금증이 완전히 해소되지 않는다 

 

어쨌든 무거운 기능이 아닌 단순 html 코드를 생성할 때는 로딩에 크게 문제를 줄 것 같지 않음으로 굳이 onload 를 사용하지 않아도 될 것 같다 

 

[HTML]

 <div>
 <input type="checkbox" id="checkbox1">
 <label for="checkbox1">Onion</label>
 </div>

[JS]

const newDiv = document.createElement('div');
document.body.appendChild(newDiv);

const newCheckbox = document.createElement('input');
document.body.newDiv.appendChild(newCheckbox);

document.getElementsByTagName('input').appendChild('type=checkbox');

const newLabel = document.createElement('label');
document.body.newDiv.appendChild(newLabel);
newLabel.innerHTML = 'Onion';

위 html 코드처럼 만들기 위해 기본 문법 참고하여 혼자서 js 코드를 작성해 봤다 

잘 모르겠는데 싶은 부분도 먼저 인터넷부터 찾아보지 않고 내 생각? 틀려도 일단 말이 되는대로 라도 작성해보자 

그리고 틀리면 그 때 구글링 해보자는 마음으로 아무말이라도 작성해봤다 

(영어도 많이 뱉어보고 많이 틀려야 느는 것처럼)

 

그런데 이 공부법은 확실히 시간이 많이 소요되는 것 같다

요즘들어 뭔가 빡세게 스파르타로 할 필요가 있다고 느껴진다

 

[다시 수정해 본 코드]

const newDiv = document.createElement('div');
document.body.appendChild(newDiv);

const newCheckbox = document.createElement('input');
// document.body.newDiv.appendChild(newCheckbox);
// document.body 는 생략해도 되는지?
newDiv.appendChild(newCheckbox);
newCheckbox.type('checkbox');

const newLabel = document.createElement('label');
newDiv.appendChild(newLabel);
newLabel.innerHTML = 'Onion';

 

 

[함수로 묶어서 실행하기]

function addCheckbox() {
    const newDiv = document.createElement('div');
    document.body.getElementsByClassName('article-main').appendChild(newDiv);

    const newCheckbox = document.createElement('input');
    // document.body.newDiv.appendChild(newCheckbox);
    // document.body 는 생략해도 되는지?
    newDiv.appendChild(newCheckbox);
    newCheckbox.type('checkbox');

    const newLabel = document.createElement('label');
    newDiv.appendChild(newLabel);
    newLabel.innerHTML = 'Onion';
}

결과는 안.됨.

 

일단 위에서부터 코드 하나하나 뜯어봐야겠다 

음 애초에 첫 코드부터 문제였네 

2탄에는 어떻게 에러를 잡았는지 (이런 걸 디버깅이라고 부르는 거 맞나) 작성하려고 한다 

 

 

 

 

//비전공자가 혼자 공부하는 공간입니다