DOM : JS에서 자식태그만들기, .append와 .appendChild의 차이점, innerHTML

비전공자가 IT개발자로, 커리어전환기10

DOM : JS에서 자식태그만들기, .append와 .appendChild의 차이점, innerHTML

우연한 기회에 친한 언니에게 내가 만든 블로그를 소개해주려고 모바일로 접속했다(자랑할라고ㅋㅋㅋ)
이거 봐라~하면서 의기양양하게 클릭했는데
아니?! 코드의 왼쪽 부분이 다 짤려서 보이지 않았다.

그래서 집에 오자마자 배운 CSS로 바로 margine 넣어서 간단하게나마 반응형 웹을 만들었다(여기서라도 자랑중)

1. 자식태그만들기

<div>태그만들기
   <button>버튼</button>
</div>

을 js에서 만들려면 방법2가지가 있다.

방법 1 : append 쓰기

var div태그 = document.createElement('div'); 
div태그.textContent = '태그만들기'; 
document.body.append(div태그);

var 버튼태그 =  document.createElement('button'); 
버튼태그.textContent = '등록'; 
div태그.append(버튼태그); //div태그(부모태그)안에 자식태그로 넣는 것.

방법 2 : appendChild 쓰기

var div태그 = document.createElement('div'); 
div태그.textContent = '태그만들기'; 
document.body.append(div태그);

var 버튼태그 =  document.createElement('button'); 
버튼태그.textContent = '등록'; 
div태그.appendChild(버튼태그); //div태그(부모태그)안에 자식태그로 넣는 것.

둘 다 잘 작동한다
그렇다면 둘의 차이점은 무엇일까?

2. .append와 .appendChild의 차이점

<div>태그만들기
   <button id='비교해보자'>등록</button>
</div>

기존 js

var div태그 = document.createElement('div'); 
div태그.textContent = '태그만들기'; 
document.body.append(div태그);

var 버튼태그 =  document.createElement('button'); 
버튼태그.textContent = '등록'; 
버튼태그.id = '비교해보자'
div태그.append(버튼태그); //div태그(부모태그)안에 자식태그로 넣는 것.

위와 같이 이미 만들어져있는 HTML에서 ‘버튼’뒤에 string을 추가하고 싶다.
이때 2가지 비교해보자.

방법 1 : append 쓰기

기존 js의 아래부분에 추가한다
document.getElementById('비교해보자').append(" 이건 어팬드");

버튼안에 ‘버튼 이건 어팬드’라고 출력되며 잘 작동한다
두번째 appendChild쓰면 어떨까?

방법 2 : appendChild 쓰기

기존 js의 아래부분에 추가한다
document.getElementById('비교해보자').appendChild(" 이건 어팬드차일드");
//TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

타입에러가 난다.
왜일까?
appendChild는 element가 필요하기 때문.
따라서 아래와 같이 적어야한다.

방법 2-1 : appendChild 쓰기

기존 js의 아래부분에 추가한다
var 어팬드차일드 =  document.createElement('text');
또는
var 어팬드차일드 =  document.createElement('span');
어팬드차일드.textContent = ' 이건 어팬드차일드'
document.getElementById('비교해보자').appendChild(어팬드차일드);

버튼안에 ‘버튼 이건 어팬드차일드’라고 출력되며 잘 작동한다
만약 버튼 안의 text를 아예 바꾸고 싶다면 appendChild와 innerHTML를 세트로 사용하면 된다!

방법 2-2 : appendChild + innerHTML 세트로 쓰기

//이 방법은 기존js에서 수정이 필요하다
//div태그.append(버튼태그);에서 appendChild로 수정이 필요하다

 div태그.appendChild(버튼태그);
 document.getElementById('비교해보자').innerHTML =' 이건 어팬드차일드';

딱 2줄 바꿨다.
근데 이건 버튼태그안의 내용에 추가하는 게 아니라 내용 자체를 변경하는 것이다

따라서 버튼태그안의 text인 ‘등록’은 없어지고 ‘ 이건 어팬드차일드’만 남는다.

결론

1. appendChild사용할 수 있는 모든 경우는 append 사용이 가능하지만, 그 반대는 아니다.
2. appendChild는 DOM method고 append는 jQuery method 이다.
3. appendChild + innerHTML 세트로 사용하면 내용 변경에 유용하다

참고

• https://rpubs.com/raulUbiqum/append
• https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/append