<div class='logs'></div>
const $logs = document.querySelector('#logs')
$logs.textContent = $logs.textContent = '홈런';
$logs.innerHTML = $logs.textContent + '<br/>홈런';
<실행결과>
홈런
홈런
const message = document.createTextNode('패배!');
$logs.appendChild(message);
$logs.append(document.createElement('br'));
$logs.append('hi');
$logs.appendChild(document.createTextNode('ㅎㅎㅎㅎ'));
append를 사용하면
$logs.textContent
로 불러와서+
로 더해주지 않아도 추가를 좀 더 편하게 할 수 있다
<실행결과>
패배!
hiㅎㅎㅎ
append
를 사용하면node
객체와DOM string
모두 사용할 수 있지만appendChild
를 사용하는 경우,node
객체만 사용할 수 있다!
(append
만 기억하는 것이 좋음.append
를 사용하면 여러 개를 넣을 수도 있고, 따로document.createTextNode
를 사용하지 않아도 된다)
참고
요소를 생성할 수 있다!
document.createElement( 'h1' ) // <h1></h1> 생성