javascript - JavaScriptで、新しいdivを動的に作成、変更、移動、可能な限り変更する方法はありますか？

Question

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

したがって、高さ、幅、上/左などに関して、作成された各divを変更できる必要があります。それでも、document.getElementById("created_div").style.whatever何もしません。新しいdivが1つも表示されません。新しいdivの高さ/幅を500px、背景を「赤」などに設定しましたが、新しいdivが確実に表示されることはありません。

私は何が間違っているのですか？

Answer 1

• 創造 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操作の基本をカバーしています。新しく作成されたノードをドキュメント内に表示するには、本文または本文に含まれるノードに要素を追加する必要があることに注意してください。

Answer 2

JQueryを試しましたか？バニラJavaScriptは難しい場合があります。これを使用してみてください：

$('.container-element').add('<div>Insert Div Content</div>');

.container-elementは、要素をクラス「container-element」（お​​そらく、divを挿入する親要素）でマークするJQueryセレクターです。次に、add()関数はHTMLをcontainer-elementに挿入します。