JavaScript'te dinamik olarak nasıl yeni div oluşturulur, değiştirilir, taşınır, mümkün olan her şekilde değiştirilir?

Sayfa yüklenirken yeni div'ler oluşturmak istiyorum. Bu div'ler, JSON dosyasındaki harici verilere bağlı olarak değişen sıralı bir grup olarak görünecektir. Bunu bir for döngüsü ile yapmam gerekecek çünkü 100'den fazla div gerekli.

Bu nedenle, oluşturulan her bir div'i yükseklik, genişlik, üst / sol vb. Açısından değiştirebilmem gerekiyor. Yine document.getElementById("created_div").style.whateverde hiçbir şey yapmıyor, tek bir yeni div bile göremiyorum. Yeni divs yüksekliğini / genişliğini 500px, arkaplanı "kırmızı" olarak ayarladım, ancak yeni div'ler kesinlikle görünmüyor.

Neyi yanlış yapıyorum?

• Yaratılış var div = document.createElement('div');
• İlave document.body.appendChild(div);
• Stil işleme
  • Konumlandırma div.style.left = '32px'; div.style.top = '-16px';
  • Sınıflar div.className = 'ui-modal';
• Değişiklik
  • İD div.id = 'test';
  • içerikler (HTML kullanarak) div.innerHTML = '<span class="msg">Hello world.</span>';
  • içerikler (metin kullanarak) div.textContent = 'Hello world.';
• Kaldırma div.parentNode.removeChild(div);
• Erişim
  • kimliğe göre div = document.getElementById('test');
  • etiketlere göre array = document.getElementsByTagName('div');
  • sınıfa göre array = document.getElementsByClassName('ui-modal');
  • CSS seçici (tekli) div = document.querySelector('div #test .ui-modal');
  • CSS seçici (çoklu) array = document.querySelectorAll('div');
• İlişkiler (metin düğümleri dahil)
  • çocuklar node = div.childNodes[i];
  • kardeş node = div.nextSibling;
• İlişkiler (yalnızca HTML öğeleri)
  • çocuklar element = div.children[i];
  • kardeş element = div.nextElementSibling;

Bu, DOM işlemenin temellerini kapsar. Yeni oluşturulan düğümün belgede görünür olması için gövdeye veya gövdede bulunan düğüme öğe eklenmesi gerektiğini unutmayın.

JQuery'yi denediniz mi? Vanilya javascript zor olabilir. Bunu kullanmayı deneyin:

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

.container-elementöğeyi "kapsayıcı öğesi" sınıfıyla (muhtemelen div'lerinizi eklemek istediğiniz ana öğe) işaretleyen bir JQuery seçicidir. Daha sonra add()işlev HTML'yi konteyner elemanına ekler.