[Javascript] JS로 HTML 요소 생성 및 추가 방법

반응형

Javascript로 html 요소 생성

서버와 통신이든 추후의 js에서 html 코드를 만들어야 하는 경우가 있을 때 사용하면 좋다

 

 

createElement() 메서드

document 객체의 createElement() 메서드를 사용한 것 

 

// div 생성
const div = document.createElement('div');
// 텍스트 적용하는 방법
div.textContent = 'Hello'; 
// 스타일 적용하는 방법
div.className = 'div-style'
// 또는
div.classList.add('div-style');
// id 적용하는 방법
div.id = 'div-ID'
// 원하는 위치에 생성된 div를 넣어줘야 화면에 나타난다.
document.body.appendChild(div);

 

div를 생성하고, 원하는 텍스트나 스타일을 적용하고 id도 추가할 수 있다.

중요한 것은 생성된 객체를 원하는 위치에 붙여넣기를 해줘야 화면에 나타난다는 점이다.

 

 

Object.assing() 메서드

createElement() 메서드와 유사하지만, html 태그에 설정해야하는 속성(id, class, text..등)이 많을 경우 코드가 더 간결해질 수 있다.

 

// body 에 추가하고자 할 때
document.body.appendChild(
    Object.assign(
        document.createElement('div'),
        { id: 'div-1' },
        { textContent: 'Hello' }
    )
);

 

 

백틱(backtic)(` `) 사용

자판에서 숫자1 옆에 있는 ``로 감싸는걸 백틱이라고 한다.

백틴의 장점은 html 코드 모양 그대로 넣을 수 있다는 점과 javascript에서 선언한 함수를 호출하기에도 유용하다.

다만 주의할 점은 코드 생성할 때 백틱안에 띄어쓰기나 들여쓰기 모두 화면 그대로 표시될 수 있다는 점이다.

 

// body 에 추가하고자 할 때
let div2 = 'div-2'
document.body.innerHTML = `
  <div id='div-1'>div-1 Hello</div>
  <div id='div-2'>${div2} Hello</div>
  <div id='div-3'>div-3 Hello</div>
`;