[DOM] object HTMLElement 에러 핸들링

문제 상황 : 의도한 웹 페이지가 렌더링 되지 않고, 브라우저 화면에 [object HTMLElement]가 표시됨

원인 : DOM 객체가 HTML 엘리먼트의 내용(content)으로 전달됨

해결방안 : append 메소드를 사용하여 DOM 객체를 자식 노드로 연결하기

 

에러 코드 (innerHTML 메소드 사용)

// page.js

module.exports = function createHTML () {

  const main = document.createElement('main');
  const h1 = document.createElement('h1');
  h1.textContent = '페이지';
  const div = document.createElement('div');
  div.textContent = '내용';

  main.append(h1, div)

  return main;
}


// index.js

const Template = require("./page.js");
const contentDiv = document.querySelector('#root')

contentDiv.innerHTML = Template();  
// innerHTML 메소드로 DOM 객체가 HTML 엘리먼트의 내용(content)에 추가됨

 

수정된 코드 (append 메소드 사용)

// page.js

module.exports = function createHTML () {

  const main = document.createElement('main');
  const h1 = document.createElement('h1');
  h1.textContent = '페이지';
  const div = document.createElement('div');
  div.textContent = '내용';

  main.append(h1, div)

  return main;
}


// index.js

const Template = require("./page.js");
const contentDiv = document.querySelector('#root')

contentDiv.append(Template());
// append 문법을 사용하여 DOM 객체를 자식 노드로 연결