Erstellen Sie <div> und hängen Sie <div> dynamisch an

128

Ich versuche ein <div>dynamisches zu erstellen , mit einem angehängten <div>Inneren. Ich habe dies bisher, was funktioniert:

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

Ich habe nur Probleme beim Erstellen und Anhängen der zweiten Div an die erste Div.

Ich möchte dies im Wesentlichen als letztes Markup tun:

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

javascript Michael Berkowski
quelle

19

Das ist eine seltsame Art, das Körperelement zu bekommen ... benutze es einfach document.body.

Guffa

234

Verwenden Sie den gleichen Prozess. Sie haben bereits die Variable, iDivdie sich noch auf das ursprünglich erstellte Element bezieht <div id='block'>. Sie müssen nur eine andere erstellen <div>und anrufen 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/

Die Reihenfolge der Ereigniserstellung muss nicht so sein, wie ich es oben habe. Sie können das Neue abwechselnd innerDivan das äußere Div anhängen, bevor Sie beide zum Div hinzufügen <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
quelle

3

Die "Extrameile" zu gehen war die Moral der Geschichte :-)!

kann auch die letzte Zeile verkürzen mit: 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
quelle

Sie haben Michael Berkowski

Oliver Bayes-Shelton

3

Ich glaube nicht, dass ich das hätte tun können. Einfache Lösungen weisen normalerweise eine geringe Varianz auf: 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
quelle

3

Nun, ich weiß nicht, wie dynamisch dies ist, aber manchmal kann dies Ihr Debugging-Leben retten:

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;

"Ratten-Javascript" Wenn ich es richtig gemacht habe. Funktioniert für mich direkt, wenn div und content natürlich nicht selbst dynamisch sind, oder Sie können sogar die Zeichenfolge manipulieren, um dies ebenfalls zu ändern, obwohl die Zeichenfolgenmanipulation komplexer ist als der Ansatz "element.property = bla", ist dies sehr willkommen Flexibilität und ist auch ein großartiges Debugging-Tool :) Ich hoffe, es hilft.

Jorge Al Najjar
quelle

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

 }

user2563247
quelle

Es könnte hilfreich gewesen sein, darauf hinzuweisen, dass Sie eine JavaScript-Bibliothek verwendet haben und dass Ihr Beispiel ein anderes Markup als die ursprüngliche Frage verwendet.

Rob

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
quelle

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
quelle

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

Verbündete
quelle

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
quelle

Erstellen Sie <div> und hängen Sie <div> dynamisch an

Antworten: