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

Je suis en train de créer un <div> de façon dynamique, avec un ajouté <div> à l'intérieur. J'ai cette mesure qui fonctionne:

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

Je suis juste avoir de la difficulté à la création et l'ajout de la deuxième div pour la première div.

J'ai à faire, c'est la dernière balisage:

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

C'est une drôle de façon de faire de l'élément de corps... il suffit d'utiliser document.body.

InformationsquelleAutor | 2012-12-22

javascript

215

Utiliser le même processus. Vous avez déjà la variable iDiv qui fait toujours référence à l'élément d'origine <div id='block'> vous avez créé. Vous avez juste besoin de créer un autre <div> et appel 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 la création d'événements n'a pas à être comme je l'ai ci-dessus. Vous pouvez ajouter de nouvelles innerDiv à l'extérieur de la div avant d'ajouter les deux à la <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);

Allez les "extra mile" est la morale de l'histoire :-)!

InformationsquelleAutor Michael Berkowski

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);

vous avez assez bien copié Michael Berkowski
Je ne pense pas que j'aurais pu faire cela. Des solutions simples ont généralement faible variance :D.

InformationsquelleAutor Moazzam Khan

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);

InformationsquelleAutor austincheney

3

Bien, je ne sais pas comment cette dynamique est, mais parfois, cela peut sauver votre débogage vie:
```
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. Fonctionne pour moi directement lors de la div et le contenu ne sont pas eux-mêmes de la dynamique des cours, ou vous pouvez même manipuler la chaîne de changer ça aussi, bien que la chaîne de la manipulation est complexe que la "élément.property=bla" approche, cela donne une très bienvenue de la flexibilité, et est un excellent outil de débogage trop 🙂 j'Espère que ça aide.

InformationsquelleAutor Jorge Al Najjar

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);
}

InformationsquelleAutor Muhammad Talha Akbar

var i=0,length=2;

     for(i; i<=length;i++)
 {
  $('#footer-div'+[i]).append($('<div class="ui-footer ui-bar-b ui-footer-fixed slideup" data-theme="b" data-position="fixed" data-role="footer" role="contentinfo" ><h3 class="ui-title" role="heading" aria-level="1">Advertisement </h3></div>')); 

 }

pourrait avoir été bien d'indiquer que vous utilisez une bibliothèque JavaScript et que votre exemple utilise différents balisage de la question d'origine.

InformationsquelleAutor user2563247

var arrayDiv = new Array();
    for(var i=0; i <= 1; i++){
        arrayDiv[i] = document.createElement('div');
        arrayDiv[i].id = 'block' + i;
        arrayDiv[i].className = 'block' + i;
    }
    document.body.appendChild(arrayDiv[0].appendChild(arrayDiv[1]));

InformationsquelleAutor Yo Mismo

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

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

iDiv.appendChild(iDiv2);
//Append to the document last so that the first append is more efficient.
document.body.appendChild(iDiv);

InformationsquelleAutor Ally

    while(i<10){
               $('#Postsoutput').prepend('<div id="first'+i+'">'+i+'</div>');
               /* get the dynamic Div*/
               $('#first'+i).hide(1000);
               $('#first'+i).show(1000);
                i++;
                }

InformationsquelleAutor Amine_Dev

Vous devez vous connecter pour publier un commentaire.