Créer <div> et ajouter <div> dynamiquement

Question

Créer <div> et ajouter <div> dynamiquement

Demandé el 22 de Décembre, 2012: Quand la question a-t-elle été
483923 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

J'essaie de créer un <div> de façon dynamique, avec une annexe <div> à l'intérieur. C'est ce que j'ai fait jusqu'à présent et cela fonctionne :

var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);

J'ai juste des difficultés à créer et à ajouter la deuxième division à la première.

Je veux essentiellement faire cela comme la dernière étape de l'évaluation :

<div id="block" class="block">
   <div class="block-2"></div>
</div>

Demandé el 22 de Décembre, 2012 par Utilisateur non enregistré

Answer 1

5 Réponses

Answer 2

253voto

Michael Berkowski Points 137903

Utilisez le même processus. Vous avez déjà la variable iDiv qui fait toujours référence à l'élément original <div id='block'> que vous avez créé. Il vous suffit de créer un autre <div> et appeler appendChild() .

// Your existing code unmodified...
var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);

// Now create and append to iDiv
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';

// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);

http://jsfiddle.net/W4Sup/1/

L'ordre de création des événements ne doit pas nécessairement être tel que je le présente ci-dessus. Vous pouvez alternativement ajouter le nouvel événement innerDiv à la div extérieure avant d'ajouter les deux à l'élément <body> .

var iDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';

// Create the inner div before appending to the body
var innerDiv = document.createElement('div');
innerDiv.className = 'block-2';

// The variable iDiv is still good... Just append to it.
iDiv.appendChild(innerDiv);

// Then append the whole thing onto the body
document.getElementsByTagName('body')[0].appendChild(iDiv);

Répondu el 22 de Décembre, 2012 par Michael Berkowski (137903 Points )

Answer 3

11voto

Moazzam Khan Points 1514

var iDiv = document.createElement('div');

iDiv.id = 'block';
iDiv.className = 'block';
document.getElementsByTagName('body')[0].appendChild(iDiv);

var div2 = document.createElement('div');

div2.className = 'block-2';
iDiv.appendChild(div2);

Répondu el 22 de Décembre, 2012 par Moazzam Khan (1514 Points )

Answer 4

4voto

austincheney Points 687

var iDiv = document.createElement('div'),
    jDiv = document.createElement('div');
iDiv.id = 'block';
iDiv.className = 'block';
jDiv.className = 'block-2';
iDiv.appendChild(jDiv);
document.getElementsByTagName('body')[0].appendChild(iDiv);

Répondu el 22 de Décembre, 2012 par austincheney (687 Points )

Answer 5

3voto

Jorge Al Najjar Points 83

Je ne sais pas à quel point c'est dynamique, mais parfois cela peut vous sauver la vie lors du débogage :

var daString="<div id=\'block\' class=\'block\'><div class=\'block-2\'></div></div>";
var daParent=document.getElementById("the ID of whatever your parent is goes in here");
daParent.innerHTML=daString;

"Rat javascript" Si je l'ai fait correctement. Cela fonctionne pour moi directement lorsque le div et le contenu ne sont pas eux-mêmes dynamiques bien sûr, ou vous pouvez même manipuler la chaîne pour changer cela aussi, bien que la manipulation de la chaîne soit plus complexe que l'approche "element.property=bla", cela donne une flexibilité bienvenue, et c'est un excellent outil de débogage aussi :) J'espère que cela vous aidera.

Répondu el 7 de Septembre, 2017 par Jorge Al Najjar (83 Points )

Answer 6

3voto

Muhammad Talha Akbar Points 5499

window.onload = function() {
  var iDiv = document.createElement('div');
  iDiv.id = 'block';
  iDiv.className = 'block';
  document.body.appendChild(iDiv);

  var iiDiv = document.createElement('div');
  iiDiv.className = 'block-2';

  var s = document.getElementById('block');
  s.appendChild(iiDiv);
}

Répondu el 22 de Décembre, 2012 par Muhammad Talha Akbar (5499 Points )

Créer <div> et ajouter <div> dynamiquement

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Créer <div> et ajouter <div> dynamiquement

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: