สร้าง <div> และต่อท้าย <div> แบบไดนามิก

128

ฉันพยายามสร้าง<div>แบบไดนามิกโดยมีการผนวกไว้<div>ด้านใน ฉันมีสิ่งนี้ที่ใช้งานได้:

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

ฉันมีปัญหาในการสร้างและต่อท้าย div ที่สองกับ div ตัวแรก

โดยพื้นฐานแล้วฉันต้องการทำสิ่งนี้เป็นมาร์กอัปขั้นสุดท้าย:

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

javascript

— Michael Berkowski
แหล่งที่มา

19

นั่นเป็นวิธีที่แปลกในการได้รับองค์ประกอบร่างกาย ... document.bodyเพียงแค่การใช้งาน

— Guffa

234

ใช้กระบวนการเดียวกัน คุณมีตัวแปรอยู่แล้วiDivซึ่งยังคงอ้างอิงถึงองค์ประกอบดั้งเดิมที่<div id='block'>คุณสร้างขึ้น คุณเพียงแค่ต้องสร้างอีกและโทร<div>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/

ลำดับของการสร้างเหตุการณ์ไม่จำเป็นต้องเป็นไปตามที่ฉันมีด้านบน คุณสามารถต่อท้ายใหม่innerDivกับ div ภายนอกก่อนที่คุณจะเพิ่มทั้งสองในไฟล์<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
แหล่งที่มา

3

การไป 'ไมล์พิเศษ' เป็นคุณธรรมของเรื่อง :-)!

ยังสามารถย่อบรรทัดสุดท้ายด้วย: 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
แหล่งที่มา

คุณได้คัดลอก Michael Berkowski

— Oliver Bayes-Shelton เมื่อ

3

ฉันไม่คิดว่าฉันจะทำได้ วิธีแก้ปัญหาอย่างง่ายมักจะมีความแปรปรวนต่ำ: 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
แหล่งที่มา

3

ฉันไม่รู้ว่าไดนามิกนี้เป็นอย่างไร แต่บางครั้งสิ่งนี้อาจช่วยชีวิตการดีบักของคุณ:

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;

"หนู javascript" ถ้าฉันทำถูกต้อง ใช้ได้กับฉันโดยตรงเมื่อ div และเนื้อหาไม่ได้เป็นแบบไดนามิกแน่นอนหรือคุณสามารถจัดการสตริงเพื่อเปลี่ยนแปลงได้เช่นกันแม้ว่าการจัดการสตริงจะซับซ้อนกว่าวิธี "element.property = bla" แต่ก็ให้การต้อนรับอย่างดี มีความยืดหยุ่นและเป็นเครื่องมือในการแก้ไขจุดบกพร่องที่ยอดเยี่ยมเช่นกัน :) หวังว่าจะช่วยได้

— Jorge Al Najjar
แหล่งที่มา

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
แหล่งที่มา

อาจเป็นเรื่องดีที่บ่งบอกว่าคุณใช้ไลบรารี JavaScript และตัวอย่างของคุณใช้มาร์กอัปที่แตกต่างจากคำถามเดิม

— ปล้น

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

— มูฮัมหมัดตัลฮาอัคบาร์
แหล่งที่มา

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
แหล่งที่มา

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

— พันธมิตร
แหล่งที่มา

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
แหล่งที่มา