Question

我有一些由十六进制值和图片网址组成的数组。

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元素和一个span元素兄弟。然后，每个div和spans都应附加到列表项元素。

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：无法在'Node'上执行'appendChild'：参数1的类型不是'Node'。”

非常感谢任何帮助！

Answer 1

如果您修复索引从0开始，我在这里看不到代码有效的问题。查看codepen并打开控制台并输入envelope_chart_list_items[0]。它至少在Safari上有效。此外，for..in循环不适用于可能导致问题的集合（它遍历属性）。如果可以，请考虑使用ES2015中的for..of。

Javascript - ＆gt;未捕获的TypeError：无法在'Node'上执行'appendChild'

1 个答案: