Javascript -> Uncaught TypeError: Не удалось выполнить 'appendChild' в 'Node'

Question

У меня есть несколько массивов, состоящих из шестнадцатеричных значений и 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'... 

С этим я пытаюсь создать дивы, каждый с уникальным ребенком IMG элемента и двускатной элемента Sibling к DIV. Затем каждый из этих 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; 
     }); 

К сожалению, когда элемент списка элемент пытается добавить элемент DIV, я получаю следующее сообщение об ошибке:

«Uncaught TypeError: Не удалось выполнить„AppendChild“на„Node“: Параметр 1 не типа «Узел».

Любая помощь очень ценится!

Answer 1

Я не вижу никаких проблем здесь код работает, если вы исправите, что индексы начинаются с 0. Посмотрите на codepen и откройте консоль и введите envelope_chart_list_items[0]. Он работает как минимум на Сафари. Также цикл for..in не предназначен для коллекций (он выполняет итерацию через свойства), что могло вызвать проблемы для вас. По возможности используйте for..of от ES2015.