Javascript: come creare un nuovo div in modo dinamico, modificarlo, spostarlo, modificarlo in ogni modo possibile?

Question

Sono stato alle prese con questo per ore e sto diventando pazzo. Voglio creare nuovi div al caricamento della pagina. Questi div appariranno come un gruppo ordinato che cambia a seconda dei dati esterni da un file JSON. Dovrò farlo con un ciclo for perché ci sono oltre 100 div necessari.

Quindi, ho bisogno di essere in grado di cambiare ogni div creato in termini di altezza, larghezza, alto/sinistra e così via. Eppure, document.getElementById("created_div").style.whatever non fa nulla, non riesco nemmeno a vedere apparire un nuovo div. Ho impostato la nuova altezza div/width su 500px, lo sfondo su "red" e così via, ma non ci sono sicuramente nuove div. Che cosa sto facendo di sbagliato? Perche'e'cosi difficile? Sheesh. Aiuto!

Answer 1

• Creationvar div = document.createElement('div');
• Additiondocument.body.appendChild(div);
• Style manipulation
  • Posizionamento div.style.left = '32px';div.style.top = '-16px';
  • Classesdiv.className = 'ui-modal';
• M ODIFICA
  • IDdiv.id = 'test';
  • contents (using HTML)div.innerHTML = '<span class="msg">Hello world.</span>';
  • contents (using text)div.textContent = 'Hello world.';
• Removaldiv.parentNode.removeChild(div);
• Accesso
  • by IDdiv = document.getElementById('test');
  • by tagsarray = document.getElementsByTagName('div');
  • by classarray = document.getElementsByClassName('ui-modal');
  • by CSS selector (single)div = document.querySelector('div #test .ui-modal');
  • by CSS selector (multi)array = document.querySelectorAll('div');
• Relazioni (i nodi di testo inclusi)
  • childrennode = div.childNodes[i];
  • siblingnode = div.nextSibling;
• Relazioni (elementi HTML solo)
  • childrenelement = div.children[i];
  • siblingelement = div.nextElementSibling;

Questo copre le basi della manipolazione del DOM. Ricordare che è necessario aggiungere un elemento al corpo o un nodo contenuto nel corpo per rendere visibile il nodo appena creato all'interno del documento.

Answer 2

Hai provato JQuery? Vanilla JavaScript può essere difficile. Provare a utilizzare questo:

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

.container-element è un selettore JQuery che segna l'elemento con la classe "contenitore-elemento" (presumibilmente l'elemento principale in cui si desidera inserire i div). Quindi la funzione add() inserisce HTML nell'elemento contenitore.