Tạo <div> và nối <div> một cách linh hoạt

128

Tôi đang cố gắng tạo ra một <div>động lực, với một <div>bên trong được nối thêm . Tôi có cái này cho đến nay hoạt động:

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

Tôi chỉ gặp khó khăn khi tạo và nối thêm div thứ hai vào div đầu tiên.

Tôi về cơ bản muốn làm điều này như là đánh dấu cuối cùng:

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

javascript

— Michael Berkowski
nguồn

19

Đó là một cách kỳ lạ để có được yếu tố cơ thể ... chỉ cần sử dụng document.body.

— Guffa

234

Sử dụng quy trình tương tự. Bạn đã có biến iDivvẫn đề cập đến yếu tố ban đầu <div id='block'>bạn đã tạo. Bạn chỉ cần tạo một cái khác <div>và gọi 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/

Thứ tự tạo sự kiện không nhất thiết phải như tôi có ở trên. Bạn có thể xen kẽ cái mới innerDivvào div bên ngoài trước khi bạn thêm cả hai vào <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
nguồn

3

Đi 'thêm dặm' là đạo đức của câu chuyện :-)!

cũng có thể rút ngắn dòng cuối cùng với: 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
nguồn

bạn đã sao chép khá nhiều Michael Berkowski

— Oliver Bayes-Shelton

3

Tôi không nghĩ rằng tôi có thể làm điều đó. Các giải pháp đơn giản thường có phương sai thấp: 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
nguồn

3

Chà, tôi không biết điều này năng động như thế nào, nhưng đôi khi điều này có thể cứu cuộc sống gỡ lỗi của bạ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" Nếu tôi làm đúng. Tất nhiên là hoạt động với tôi khi div và nội dung không phải là động, hoặc thậm chí bạn có thể điều khiển chuỗi để thay đổi điều đó, mặc dù thao tác chuỗi phức tạp hơn so với cách tiếp cận "Element.property = bla", điều này rất được hoan nghênh linh hoạt, và là một công cụ sửa lỗi tuyệt vời quá :) Hy vọng nó sẽ giúp.

— Jorge Al Najjar
nguồn

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

 }

— người dùng2563247
nguồn

có thể rất hay khi cho biết bạn đang sử dụng thư viện JavaScript và ví dụ của bạn sử dụng đánh dấu khác với câu hỏi ban đầu.

— cướp

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
nguồn

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
nguồn

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

— Đồng minh
nguồn

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
nguồn