追加孩子

Question

我恨我的生活。我正在尝试完成一个简单的教程，它采用一个空div并添加一堆猫图像。猫的细节包含在数组中，这些数组在迭代通过简单的数字数组时应用于cat的每个实例。

在脚本的底部，您将看到我正在警告主容器div的innerHTML，其中应该附加所有这些图像和标头标记。虽然警报对话框显示正确的HTML，但正在生成的div缺少img和h1元素，尽管我试图让它们正确追加。所有似乎都要通过的是h1文本节点。

任何人都可以解释为什么我没有得到我在这里寻找的结果：

    var cats_array = [1,2,3,4,5];

    var cats_names = ['Jim','Joe','Jon','Larry','Mike'];

    var cats_urls = [
      'https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-senior-landing-hero.ashx',
      'http://i2.mirror.co.uk/incoming/article6745691.ece/ALTERNATES/s615b/Black-cat.jpg',
      'https://www.royalcanin.com/~/media/Royal-Canin/Product-Categories/cat-breed-landing-hero.ashx',
      'https://www.royalcanin.com/~/media/Royal-Canin/Subpage-Hero-Images/150327_Hero_kit.ashx',
      'https://s-media-cache-ak0.pinimg.com/736x/a7/92/d8/a792d8ec74bbcc819bb65c7bad1f8dee.jpg'
    ];

    for (cat in cats_array) {

      var catgame_div = document.getElementById('catgame');
      var num_div = document.createElement('DIV');
      var img_el = document.createElement('IMG');
      var h1_el = document.createElement('H1');
      
      var current_cats_name = cats_names[cat];
      var h1_text_node = document.createTextNode(current_cats_name);

      h1_el.appendChild(h1_text_node);
      img_el.src = cats_urls[cat];
      num_div.appendChild(img_el);

      var img_parent = img_el.parentNode;

      img_parent.insertBefore(h1_el, img_el);

      alert(img_parent.innerHTML);

      catgame_div.appendChild(num_div);

    }

<div id="catgame"></div>

谢谢