Cree <div> y agregue <div> dinámicamente

128

Estoy tratando de crear <div>dinámicamente, con un anexo adjunto <div>. Tengo esto hasta ahora que funciona:

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

Solo estoy teniendo problemas para crear y agregar el segundo div al primer div.

Básicamente quiero hacer esto como el marcado final:

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

javascript Michael Berkowski
fuente

19

Esa es una forma extraña de obtener el elemento del cuerpo ... solo use document.body.

Guffa

234

Usa el mismo proceso. Ya tiene la variable iDivque todavía se refiere al elemento original <div id='block'>que ha creado. Solo necesita crear otro <div>y llamar 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/

El orden de creación de eventos no tiene que ser el que tengo arriba. Alternativamente, puede agregar el nuevo innerDival div externo antes de agregar ambos al <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);

Michael Berkowski
fuente

3

Hacer un esfuerzo adicional fue la moraleja de la historia :-)!

También puede acortar la última línea con: document.body.appendChild (iDiv);

idan hav

8

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

Moazzam Khan
fuente

prácticamente has copiado a Michael Berkowski

Oliver Bayes-Shelton el

3

No creo que pudiera haber hecho eso. Las soluciones simples generalmente tienen baja varianza: D.

Moazzam Khan

4

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

austincheney
fuente

3

Bueno, no sé cuán dinámico es esto, pero a veces esto puede salvar su vida de depuración:

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 lo hice correctamente. Funciona para mí directamente cuando el div y los contenidos no son dinámicos, por supuesto, o incluso puedes manipular la cadena para cambiar eso también, aunque la manipulación de la cadena es compleja que el enfoque "element.property = bla", esto da una muy buena acogida flexibilidad, y es una gran herramienta de depuración también :) Espero que ayude.

Jorge Al Najjar
fuente

2

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

 }

usuario2563247
fuente

podría haber sido bueno indicar que estaba usando una biblioteca de JavaScript y que su ejemplo usa un marcado diferente al de la pregunta original.

robar el

2

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

Muhammad Talha Akbar
fuente

1

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

Yo Mismo
fuente

0

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

Aliado
fuente

0

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

Amine_Dev
fuente

Cree <div> y agregue <div> dinámicamente

Respuestas: