Javascript->；未捕获类型错误：未能执行'；追加儿童'；在'；节点'；

我有一些由十六进制值和图像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，每个div都有一个唯一的子img元素和一个与div同级的span元素。然后，这些div和span中的每一个都应该附加到一个列表项元素

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;
      });

不幸的是，当list item元素尝试附加div元素时，出现以下错误：

未捕获的TypeError:未能在“节点”上执行“appendChild”：参数1不是“节点”类型

---

非常感谢您的帮助

我没有发现任何问题。如果您修复了索引从0开始的问题，那么代码就可以工作。查看并打开控制台，然后键入

信封\u图表\u列表\u项目[0]

。它至少在Safari上起作用。另外，

for..in

循环不适用于可能会给您带来问题的集合（它会迭代属性）。考虑从ES2015使用<<代码> < <代码> >，如果可以的话。

< p>我在这里没有发现任何问题，如果您修复这些索引从0开始，代码将起作用。查看并打开控制台，然后键入

信封\u图表\u列表\u项目[0]

。它至少在Safari上起作用。另外，

for..in

循环不适用于可能会给您带来问题的集合（它会迭代属性）。考虑从ES2015使用<<代码> <代码> >，如果你可以。

学习<代码> .map < /Cord>。因此，你不必使用iFIFE和循环：只是一个疯狂的猜测：它不是<代码>信封，而是图片[i] < /代码>？因为我相信

envelope\u chart\u divs\u with\u images\u array

是函数变量，也许我错了。谢谢你的帮助。Felix，我用map重写了所有的东西，但是得到了同样的错误，只是现在可以说，它在子附加行的后面。无论如何，谢谢。Gerardo，我不认为这会是一个问题，因为我在下一个函数中使用了相同的变量名来附加它。我知道这可能会引起一些混乱。如果你

console.log（envelope\u chart\u divs\u with\u images\u array）

，你看到了什么？了解

.map

，这样你就不必使用iLife和循环：。只是一个粗略的猜测：它不是

envelope\u divs\u with\u images[I]

？因为我相信

envelope\u chart\u divs\u with\u images\u array

是函数变量，也许我错了。谢谢你的帮助。Felix，我用map重写了所有的东西，但是得到了同样的错误，只是现在可以说，它在子附加行的后面。无论如何，谢谢。Gerardo，我不认为这会是一个问题，因为我在下一个函数中使用了相同的变量名来附加它。我知道这可能会引起一些混乱。如果您

console.log（信封\u chart\u divs\u和\u images\u array）

，您会看到什么？