[object HTMLButtonElement], outerHTML 정리

버건디·2022년 10월 24일

목록 보기

20/31

<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>공부</title>
  <style>

  </style>

<script>
  document.addEventListener('DOMContentLoaded', () => {

  const btn = document.getElementById('btn');
  const text = document.getElementById('text');
  const list = document.getElementById('list');

  function createLiAndBtn(){
    const newList = document.createElement('li');
    const newBtn = document.createElement('button');
    newBtn.innerText = 'X';
    list.append(newList);
    newList.append(newBtn);
    newList.innerHTML = text.value + newBtn;   
  }
  
  btn.addEventListener('click', createLiAndBtn);
  })

  
</script>
</head>
<body>
  <div id="container" >
  <ul id="list">

  </ul>

  <input type="text" placeholder="텍스트" id="text">
  <button id="btn">제출</button>

</div>

</body>
</html>

저 제출 버튼을 눌렀을때, ul 태그안에 li 태그가 생기고 그 li 태그 옆에 버튼 태그가 생기도록 하고 싶었다.

하지만 저 제출버튼을 클릭했을때 버튼태그가 생기는 것이 아니라 [object HTMLButtonElement] 이라는 문구가

나타났다.

왜 button 태그가 안나타나고 HTML객체가 나타나는 것일까 ??

저 createElement로 인해 만들어진 newBtn 은 button 객체이다.

console.log 를 통해 newBtn 을 출력해보면 저런식으로 문자열이 아닌 태그 자체가 나오는데,

이걸 text.value(문자열)과 합치려고 하면 newBtn 내부에서 toString() 이 실행되어서

[object HTMLButtonElement] 이 나오는 것이다.

그렇다면 어떻게 해결해야할까??

🔍 1. innerHTML 자체내에서 button 태그 만들어주기

  function createLiAndBtn(){
    const newList = document.createElement('li');

    list.append(newList);

    newList.innerHTML = `${text.value} <button>X</button>`;

  }

이런식으로 innerHTML 안에 직접 button 태그 자체를 적어주면 정상적으로 생성되는 것을 볼 수 있다.

🔍 2. outerHTML 사용하기

  function createLiAndBtn(){
    const newList = document.createElement('li');
    const newBtn = document.createElement('button');
    newBtn.innerText = 'X';
    list.append(newList);
    newList.append(newBtn);
    newList.innerHTML = text.value + newBtn.outerHTML;   
  }