Comment créer un nouveau div dynamiquement, le changer, le déplacer, le modifier de toutes les manières possibles, en JavaScript ?

Question

Je veux créer de nouvelles divisions au fur et à mesure que la page se charge. Ces divs apparaîtront comme un groupe ordonné qui changera en fonction de données externes provenant d'un fichier JSON. J'ai besoin de faire cela avec une boucle for car il y a plus de 100 divs nécessaires.

J'ai donc besoin de pouvoir modifier chaque div créé en ce qui concerne la hauteur, la largeur, le haut et la gauche, etc. Pourtant, document.getElementById("created_div").style.whatever ne fait rien, je ne vois même pas apparaître une seule nouvelle division. J'ai réglé la hauteur/largeur des nouvelles divisions sur 500px, l'arrière-plan sur "rouge", etc., mais aucune nouvelle division n'apparaît vraiment.

Qu'est-ce que je fais de mal ?

Answer 1

• Création var div = document.createElement('div');
• Addition document.body.appendChild(div);
• Manipulation du style
  • Positionnement div.style.left = '32px'; div.style.top = '-16px';
  • Classes div.className = 'ui-modal';
• Modification
  • ID div.id = 'test';
  • contenu (en utilisant HTML) div.innerHTML = '<span class="msg">Hello world.</span>';
  • contenu (en utilisant du texte) div.textContent = 'Hello world.';
• Déménagement div.parentNode.removeChild(div);
• Accès à
  • par ID div = document.getElementById('test');
  • par tags array = document.getElementsByTagName('div');
  • par classe array = document.getElementsByClassName('ui-modal');
  • par sélecteur CSS (simple) div = document.querySelector('div #test .ui-modal');
  • par sélecteur CSS (multi) array = document.querySelectorAll('div');
• Relations (nœuds de texte inclus)
  • enfants node = div.childNodes[i];
  • frère et sœur node = div.nextSibling;
• Relations (éléments HTML uniquement)
  • enfants element = div.children[i];
  • frère et sœur element = div.nextElementSibling;

Ceci couvre les bases de la manipulation du DOM. N'oubliez pas que l'ajout d'un élément au corps ou à un nœud contenant le corps est nécessaire pour que le nœud nouvellement créé soit visible dans le document.

Answer 2

En fonction de votre liste et de sa source, il peut être préférable de le faire à la source. Par exemple, si vous chargez les données sources à partir d'une base de données, vous pourriez...

(cet exemple est dans oracle, donc || est pour concaténer des chaînes de caractères)

SELECT
    '<div id="' || id || '">' || SomeFieldOrExpressionHere || '</div>'
FROM
    sometable

Ensuite, vous pourriez ajaxer le tout dans un conteneur en attente (comme un div) avec le jQuery suivant...

$(IdOfOuterContainer).load(TheURLThatReturnsTheResultsOfTheSELECTAbove);

Ce serait beaucoup plus rapide que d'ajouter chaque élément via javascript, et probablement aussi beaucoup moins de code.

Answer 3

Avez-vous essayé JQuery ? Vanilla javascript peut être difficile. 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" (vraisemblablement l'élément parent dans lequel vous voulez insérer vos divs). Ensuite, l'élément add() insère du HTML dans l'élément conteneur.