Comment créer dynamiquement une nouvelle div, la changer, la déplacer, la modifier de toutes les manières possibles, en JavaScript?

Question

Je veux créer de nouveaux divs pendant le chargement de la page. Ces divs apparaîtront comme un groupe ordonné qui changera en fonction des données externes d'un fichier JSON. Je devrai le faire avec une boucle for car il faut plus de 100 divs.

Donc, je dois pouvoir changer chaque div créé en ce qui concerne la hauteur, la largeur, en haut/à gauche et ainsi de suite. Pourtant, document.getElementById("created_div").style.whatever ne fait rien, je ne peux même pas voir un seul nouveau div apparaître. J'ai réglé les nouveaux divs height/width à 500px, l'arrière-plan à "rouge", etc., mais aucun nouveau div ne s'affiche définitivement.

Qu'est-ce que je fais mal?

Answer 1

• Créationvar div = document.createElement('div');
• Ajoutdocument.body.appendChild(div);
• Manipulation de style
  • Positionnement div.style.left = '32px';div.style.top = '-16px';
  • Classesdiv.className = 'ui-modal';
• Modification
  • IDdiv.id = 'test';
  • contenu (avec HTML)div.innerHTML = '<span class="msg">Hello world.</span>';
  • contenu (avec texte)div.textContent = 'Hello world.';
• Suppressiondiv.parentNode.removeChild(div);
• Accéder à
  • par IDdiv = document.getElementById('test');
  • par balisesarray = document.getElementsByTagName('div');
  • par classearray = document.getElementsByClassName('ui-modal');
  • par sélecteur CSS (unique)div = document.querySelector('div #test .ui-modal');
  • par sélecteur CSS (multi)array = document.querySelectorAll('div');
• Relations (nœuds de texte inclus)
  • enfantsnode = div.childNodes[i];
  • frèrenode = div.nextSibling;
• Relations (éléments HTML uniquement)
  • enfantselement = div.children[i];
  • frèreelement = div.nextElementSibling;

Cela couvre les bases de la manipulation DOM. N'oubliez pas que l'ajout d'éléments au corps ou à un nœud contenu dans un corps est requis pour que le nœud nouvellement créé soit visible dans le document.

Answer 2

Avez-vous essayé JQuery ? Le javascript de vanille peut être dur. Essayez d'utiliser ceci:

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

.container-element est un sélecteur JQuery qui marque l'élément avec la classe "container-element" (probablement l'élément parent dans lequel vous souhaitez insérer vos divs). Ensuite, la fonction add() insère le code HTML dans l'élément conteneur.