[解決済み] JavaScript で新しい div を動的に作成し、それを変更、移動、あらゆる方法で修正するには？

質問

ページが読み込まれるときに新しい div を作成したい。これらの div は、JSON ファイルからの外部データに応じて変化する、順序付けられたグループとして表示されます。100 以上の div が必要なため、for ループでこれを行う必要があります。

そのため、作成された各 div の高さ、幅、上部/左側などを変更できるようにする必要があります。まだ document.getElementById("created_div").style.whatever は何もせず、新しいdivが一つも表示されないのです。新しいdivのheight/widthを500pxにしたり、backgroundを"red"にしたりしましたが、確かに新しいdivは現れません。

何が間違っているのでしょうか？

どうすればよいのでしょうか？

• 作成 var div = document.createElement('div');
• 追加 document.body.appendChild(div);
• スタイル操作
  • 位置決め div.style.left = '32px'; div.style.top = '-16px';
  • クラス div.className = 'ui-modal';
• 修正
  • ID div.id = 'test';
  • コンテンツ(HTML使用) div.innerHTML = '<span class="msg">Hello world.</span>';
  • コンテンツ（テキスト使用） div.textContent = 'Hello world.';
• 除去 div.parentNode.removeChild(div);
• アクセス方法
  • ID別 div = document.getElementById('test');
  • タグで array = document.getElementsByTagName('div');
  • クラス別 array = document.getElementsByClassName('ui-modal');
  • CSS セレクタによる (単一) div = document.querySelector('div #test .ui-modal');
  • CSS セレクタによる (複数) array = document.querySelectorAll('div');
• 関係（テキストノードを含む）
  • 子供 node = div.childNodes[i];
  • 兄弟 node = div.nextSibling;
• 関係（HTML要素のみ）
  • 子供 element = div.children[i];
  • 兄弟 element = div.nextElementSibling;

これでDOM操作の基本を網羅しました。新しく作成されたノードがドキュメント内で見えるようにするためには、bodyまたはbodyを含むノードへの要素の追加が必要であることを覚えておいてください。