31,32일차 - JS

element.innerText;

이 속성은 element 안의 text 값들만을 가져옵니다.

element.innerHTML;

innerText와는 달리 innerHTML은 element 안의 HTML이나 XML을 가져옵니다

element.innerText = "<div style='color:red'>A</div>";

element.innerText에 html을 포함한 문자열을 입력하면, html코드가 문자열 그대로 element안에 포함됩니다.

element.innerHTML = "<div style='color:red'>A</div>";

위와 같이 element.innerHTML 속성에 html코드를 입력하면, html element가 element안에 포함되게 됩니다.

위 예제에서 'innerHTML()'을 클릭하면, 입력된 html태그가 해석되어 빨간색A 가 나타나는 것을 확인 할 수 있습니다.

append와 appendChild는 모두 부모 노드에 자식 노드를 추가하는 메서드

append
-> 노드객체나 DOMString('text')을 사용할 수 있다.
-> 또한 한번에 여러 개의 자식 요소를 설정할 수 있다
-> return 값을 반환하지 않는다

노드 객체 사용 예시
const p = document.createElement('div')
const c = document.createElement('p')

p.append(c)

//결과

div

p

문자열 (DOMString) 사용 예시
const p = document.createElement('div')
p.append('append 예시')

//결과

append 예시

appendChild
-> 오직 Node 객체만 받을 수 있다
-> 한번에 오직 하나의 노드만 추가할 수 있다
-> return 값을 반환합니다

문자열(DOMString) 사용 예시
const p = document.createElement('div')
p.appendChild('텍스트')
-> 이러면 에러 발생

return 값 반환
const p = document.createElement('div')
const s = document.createElement('span')

console.log(document.body.appendChild(div))