Javascript -> Uncaught TypeError : 'node'에 'appendChild'를 실행하지 못했습니다.

Question

16 진수 값과 이미지 URL로 구성된 몇 개의 배열이 있습니다.

var envelope_colors_array = [ 
      '#feebe4', 
      '#abd076', 
      '#b8d9d5'... 

var metallic_envelope_spans_array = [ 
      'color 1', 
      'color 2', 
      'color 3'... 

var envelope_img_src_array = [ 
      '/images/envelopes/envelope.png', 
      '/images/envelopes/envelope.png', 
      '/images/envelopes/envelope.png'... 

div와 함께 각각 고유 한 img 요소와 span 요소를 div에 만들려고합니다. 그런 다음 div 및 span 각각을 목록 항목 요소에 추가해야합니다. 목록 항목 요소는 div 요소를 추가하려고 할 때

var metallic_envelope_images_array = metallic_envelope_img_src_array.map(function(img_src, index, metallic_envelope_img_src_array) { 
     var metallic_envelope_image = document.createElement('IMG'); 
     metallic_envelope_image.style.width = '100px'; 
     metallic_envelope_image.style.height = '74px'; 
     metallic_envelope_image.onload = function(){ 
      metallic_envelope_image.src = metallic_envelope_img_src_array[index]; 
     } 
     return metallic_envelope_image; 
     }); 


     var metallic_envelope_divs_array = metallic_envelope_colors_array.map(function(color, index, metallic_envelope_colors_array) { 
     var metallic_envelope_div = document.createElement('DIV'); 
     metallic_envelope_div.style.width = '100px'; 
     metallic_envelope_div.style.height = '74px'; 
     metallic_envelope_div.style.backgroundColor = metallic_envelope_colors_array[index]; 
     return metallic_envelope_div; 
     }); 


     var metallic_envelope_chart_spans_array = metallic_envelope_spans_array.map(function(span, index, metallic_envelope_spans_array){ 
     var metallic_envelope_span = document.createElement('SPAN'); 
     metallic_envelope_span.style.display = 'block'; 
     metallic_envelope_span.style.textAlign = 'center'; 
     var metallic_envelope_span_text_node = document.createTextNode(metallic_envelope_spans_array[index]); 
     metallic_envelope_span.appendChild(metallic_envelope_span_text_node); 
     return metallic_envelope_span; 
     }); 


     var metallic_envelope_chart_divs_with_images_array = metallic_envelope_divs_array.map(function(div, index, metallic_envelope_divs_array){ 
     var metallic_envelope_div_with_image = metallic_envelope_divs_array[index].appendChild(metallic_envelope_images_array[index]); 
     return metallic_envelope_div_with_image; 
     }); 
     console.log("metallic_envelope_chart_divs_with_images_array: " + metallic_envelope_chart_divs_with_images_array); 

     var metallic_envelope_chart_list_items = metallic_envelope_chart_divs_with_images_array.map(function(div_with_image, index, metallic_envelope_chart_divs_with_images_array){ 
     var metallic_envelope_li = document.createElement('LI'); 
     metallic_envelope_li.style.width = '100px'; 
     metallic_envelope_li.style.height = '74px'; 
     metallic_envelope_li.style.marginRight = '40px'; 
     metallic_envelope_li.style.display = 'inline-block'; 
     metallic_envelope_li.style.listStyleType = "none"; 
     metallic_envelope_li.appendChild(metallic_envelope_chart_divs_with_images_array[index]); 
     metallic_envelope_li.appendChild(metallic_envelope_chart_spans_array[index]); 
     return metallic_envelope_li; 
     }); 

불행하게도, 나는 다음과 같은 오류 얻을 :

"catch되지 않은 형식 오류 : 실행하지 못했습니다 '에 appendChild' '노드'에를 : 매개 변수 1은 아니다 '노드'유형의. "

도움을 주시면 대단히 감사하겠습니다.

Answer 1

색인이 0에서 시작하는 문제를 해결하면 코드가 작동하지 않습니다. codepen을보고 콘솔을 열고 envelope_chart_list_items[0]을 입력하십시오. 그것은 적어도 Safari에서 작동합니다. 또한 for..in 루프는 문제의 원인이 될 수있는 컬렉션을 대상으로하지 않습니다 (속성을 반복합니다). 가능한 경우 ES2015의 for..of을 사용해보십시오.