appendChild is not a function 오류

오늘 이야기 하고자 하는 것은

자바 스크립트에서 태그의 동적 생성에

사용되는 appendChild()에 관한 오류이다.

 

자 일단 코드를 보자 (필요 없는 것들은 다 배제했다)

<div class="comment-box">
	<ul id="replies">
		<div class='sial'>
			<ui>댓글 번호 : </ui>
			<ui class='replyId'></ui>
			<ui>작성자 번호 : </ui>
			<ui class='replyWriter'></ui>
			<ui>작성 날짜 : </ui>
			<input type="hidden" class="test" value='2'>
		</div><hr/>
	</ul>
</div>
<script>  
	chbuR();
    
    function chbuR(){
      var but = document.createTextNode('1번 버튼');
      var bu = document.createElement('button');
      bu.setAttribute("class", "ssssss");
      bu.appendChild(but);
      var dd = document.getElementsByClassName('sial');
      dd.appendChild(bu);
    }

    function chbuL(){
      var but = document.createTextNode('2번 버튼');
      var bu = document.createElement('button');
      bu.setAttribute('class', "ssssss");
      bu.appendChild(but);
      var dd = document.getElementsByClassName('sial');
      dd.appendChild(bu);
    }
</script>

자 우선 위의 코드는 아직 원하는 코드를 완성하지 못했다.

목표는 input 태그의 value값에 따라 다른 버튼 태그를 만드는 것이었다.

 

그러나 위의 코드를 실행시키면

 

위의 그림처럼 오류가 생긴다.

 

일단 많이 놀랐다. 왜냐하면 그럭저럭 많이 동적 생성과 appendChild()를 썼다고 생각했으니까....

어쨌든 해결을 위해 거의 모든 개발자들이 하는 구굴 링을 했다.

 

여러 stack overflow 페이지가 나왔지만 해결되지 않았다.

하지만 힌트? 비슷한 건 얻었는데 appendChild()는 DOM객체에서만 사용할 수 있다는 것이었다.

 

그렇다 하더라도 해결된 건 아니었기에 계속 검색하다가 stack overflow의 페이지 중 하나가 나왔다.

 

여러분들이 궁금해하는 해결방법이었다.

 

그건 바로 

var dd = document.getElementsByClassName('sial')[0];

그렇다 인덱스 처리를 해주는 것이다. [0] 추가....

사실 이 문제를 해결하기 위해 4시간 정도 투자했는데 너무 허무했다....

 

솔직히 이유는 잘 모르겠다.

class를 이용한 선택자는 여러 개를 사용할 때만 저렇게 인댁스를 사용하는 줄 알았는데, 혼자 있을 때도 저렇게 해야 한다니.... 꼭 인덱스를 넣어줘야 한다는 걸 확인한 하루다...

 

그런데 jquery를 사용하면 인덱스를 넣지 않아도 됐었다.  아래 코드 참고

 

var bu = "<button type='button' name='ssssss'>1번 버튼입니다.</button>"
$('.sial').append(bu);

 

참고했던 페이지 : stackoverflow.com/questions/30443718/uncaught-typeerror-p-appendchild-is-not-a-function

Uncaught TypeError: p.appendChild is not a function

 

요약.....

 

class를 사용할 때는 인덱스를 꼭 넣자.