createTextNode, createElement

<div class='logs'></div>

const $logs = document.querySelector('#logs')

innerHTML

$logs.textContent = $logs.textContent = '홈런';
$logs.innerHTML = $logs.textContent + '<br/>홈런';

<실행결과>

홈런
홈런

createTextNode & appendChild

const message = document.createTextNode('패배!');
$logs.appendChild(message);
$logs.append(document.createElement('br'));
$logs.append('hi');
$logs.appendChild(document.createTextNode('ㅎㅎㅎㅎ'));

append를 사용하면 $logs.textContent로 불러와서 + 로 더해주지 않아도 추가를 좀 더 편하게 할 수 있다

<실행결과>
패배!
hiㅎㅎㅎ

append와 appendChild의 차이?

append를 사용하면 node객체와 DOM string 모두 사용할 수 있지만 appendChild를 사용하는 경우, node 객체만 사용할 수 있다!
(append만 기억하는 것이 좋음. append를 사용하면 여러 개를 넣을 수도 있고, 따로 document.createTextNode를 사용하지 않아도 된다)
참고

createElement

요소를 생성할 수 있다!

document.createElement( 'h1' ) // <h1></h1> 생성