Làm thế nào để tạo động div mới, thay đổi, di chuyển, sửa đổi nó theo mọi cách có thể, trong JavaScript?

Tôi muốn tạo div mới khi trang tải. Các div này sẽ xuất hiện dưới dạng một nhóm có thứ tự thay đổi tùy thuộc vào dữ liệu bên ngoài từ tệp JSON. Tôi sẽ cần làm điều này với vòng lặp for vì có hơn 100 div cần thiết.

Vì vậy, tôi cần có thể thay đổi từng div đã tạo liên quan đến chiều cao, chiều rộng, trên cùng / bên trái, v.v. Tuy nhiên, document.getElementById("created_div").style.whateverkhông làm gì cả, tôi thậm chí không thể thấy một div mới nào xuất hiện. Tôi đã đặt chiều cao / chiều rộng div mới thành 500px, nền thành "red", v.v., nhưng không có div mới nào chắc chắn xuất hiện.

Tôi đang làm gì sai?

javascript dom

— Erik Nelson
nguồn

Chia sẻ mã bạn sử dụng để tạo ra các div

— wakooka

$ ("# box0"). append ('<div id = "create_div"> </div>');

— Erik Nelson

Nếu bạn đang làm điều này trong một vòng lặp, điều đó có nghĩa là bạn đang cố gắng tạo 100 div với cùng một số nhận dạng?

— Evan Trimboli

tìm trong bảng điều khiển trình duyệt ... có lỗi nào không? Mặc dù ID không nên lặp đi lặp lại ... không nên ngăn chặn nó được chèn nếu chọn tồn tại và không có lỗi thrown.Errors là quan trọng đầu tiên kiểm tra

— charlietfl

ngoài việc tạo chúng, bạn có chèn chúng vào DOM không?

— Gabriele Petrioli

Câu trả lời:

425

Sự sáng tạo var div = document.createElement('div');
Thêm vào document.body.appendChild(div);
Thao tác phong cách
- Định vị div.style.left = '32px'; div.style.top = '-16px';
- Các lớp học div.className = 'ui-modal';
Sửa đổi
- TÔI div.id = 'test';
- nội dung (sử dụng HTML) div.innerHTML = '<span class="msg">Hello world.</span>';
- nội dung (sử dụng văn bản) div.textContent = 'Hello world.';
Gỡ bỏ div.parentNode.removeChild(div);
Truy cập
- theo ID div = document.getElementById('test');
- theo thẻ array = document.getElementsByTagName('div');
- theo lớp array = document.getElementsByClassName('ui-modal');
- bởi bộ chọn CSS (đơn) div = document.querySelector('div #test .ui-modal');
- bằng bộ chọn CSS (đa) array = document.querySelectorAll('div');
Mối quan hệ (bao gồm các nút văn bản)
- bọn trẻ node = div.childNodes[i];
- anh chị em node = div.nextSibling;
Mối quan hệ (chỉ các phần tử HTML)
- bọn trẻ element = div.children[i];
- anh chị em element = div.nextElementSibling;

Điều này bao gồm các khái niệm cơ bản về thao tác DOM. Hãy nhớ rằng, việc bổ sung phần tử vào phần nội dung hoặc một nút chứa phần nội dung là bắt buộc để nút mới tạo có thể hiển thị trong tài liệu.

— Ryan Stein
nguồn

-1

Bạn đã thử JQuery chưa? Vanilla javascript can dai. Hãy thử sử dụng cái này:

$('.container-element').add('<div>Insert Div Content</div>');

.container-elementlà một bộ chọn JQuery đánh dấu phần tử có lớp "container-element" (có lẽ là phần tử mẹ mà bạn muốn chèn các div của mình). Sau đó, add()hàm sẽ chèn HTML vào phần tử vùng chứa.

— Brad Ross
nguồn

Tôi hiểu rồi. Tôi đã phải đặt padding lớn hơn 0. Mặc dù chiều cao và chiều rộng của nó được đặt thành 64 mỗi cái. Khỉ thật. Có cách nào để một div con hoạt động như một div bình thường không? Mục đích là để mỗi div hoạt động như một liên kết. Đang cố gắng để tạo ra một danh sách động cho một trang web trò chơi; /

— Erik Nelson

Tôi không đồng ý với điều này, innerHTML (jquery sử dụng cho điều đó) KHÔNG phải là tiêu chuẩn, và cái giá của việc không tuân theo tiêu chuẩn có thể dẫn đến sai sót. Ngoài ra, đối với tôi, không có ý nghĩa gì nếu thêm một chuỗi html kế hoạch vào một cây DOM hơn là thêm các phần tử nút.

— StormByte,

Xem xét rằng toàn bộ cây DOM bắt đầu cuộc sống dưới dạng HTML cũ thuần túy, và innerHTML chỉ là vậy - HTML mà một phần tử có trong đó, việc gặp vấn đề với một trong hai cũng ngang bằng với việc bạn nói rằng bạn không nên sử dụng DOM vì nó gây ô nhiễm HTML cũ đơn giản.

— Rodney P. Barbati