Cách tạo nhiều div động trong javascript

Bạn có muốn các số được thêm vào có thay thế hoặc không có thay thế không?

Nếu bạn muốn mà không cần thay thế, thì bạn có thể làm điều gì đó bên dưới. Tôi đã tiến thêm một bước và làm cho nó đủ chung chung để bạn có thể tạo mảng có kích thước bao giờ bạn muốn trong JavaScript và html được tạo động thay vì phải viết mã cứng cho các div html

const array = [1, 2, 3, 1, 2, 3];
const createDiv = (tile, randNum) => `
${randNum}
`;

let currTileNum = 0;
let bodyHTML = '';
do {
  let numberOfTiles = array.length;
  let randomIndex = Math.floor(Math.random() * numberOfTiles); // creates random index (0 thru array length - 1)
  let randomArrayNum = array.splice(randomIndex, 1); // removes one element from array based on random Index
  bodyHTML += createDiv(currTileNum, randomArrayNum);
} while (array.length); // stop after array is empty

document.body.innerHTML = bodyHTML;

Tôi đã chơi với Codepen của bạn và tôi tin rằng tôi đã đơn giản hóa mã và sắp xếp nó nhiều hơn một chút. Tôi đã tạo hai phiên bản. Phiên bản đầu tiên sử dụng phương thức createElement cho mỗi div ô xếp và phiên bản thứ hai tạo html dưới dạng chuỗi và sau đó đặt html bên trong của phần tử vùng chứa thành chuỗi đó

Nó hoạt động hoàn hảo trong một thời gian. Nhưng tôi muốn thêm cùng một div nhiều lần tùy thuộc vào số lần nhấp của người dùng. Có nghĩa là tôi đã đặt toàn bộ mã trên trong sự kiện bấm nút. Nếu người dùng nhấp 10 lần thì sẽ thêm 10 div theo quan điểm của tôi. Nhưng nó chỉ thêm 1 div mỗi lần

Trong bài viết này, chúng tôi sẽ chỉ cho bạn giải pháp tạo nhiều div động trong jQuery, ở đây chúng ta cần sử dụng các phương thức val(), append() và prop()

Như chúng ta biết phương thức prop() được sử dụng để đặt bất kỳ giá trị thuộc tính nào trên bất kỳ phần tử html nào để chúng ta có thể thêm một số văn bản và lớp trên phần tử div và phương thức append() được sử dụng để tạo phần tử div được thêm vào trang html sau đó sử dụng phương thức val()

Hướng dẫn từng bước về cách tạo nhiều DIV động trong jQuery. -

Ở đây, chúng tôi đã xác định khối html với phần tử đầu vào để thu thập các phần tử div một cách linh hoạt, nút để tải các quy trình này khi nó được kích hoạt và phần tử div 'parentDiv' để nối thêm các phần tử div đã tạo trên trang web

Trong khối tập lệnh, chúng tôi đã xác định phương thức ready() sẽ tự động bắt đầu tải mã trong chức năng này khi chương trình này được mở trên trình duyệt và trong đó chúng tôi chờ sự kiện nhấp chuột xảy ra được thêm vào bằng 'nút' ở đó chúng tôi thu thập giá trị phần tử đầu vào và lưu trữ trên đó

Sau đó, chúng tôi đã xác định vòng lặp for để tạo các phần tử div dựa trên đầu vào động của người dùng bằng cách sử dụng phương thức nối thêm phần tử div đã tạo được thêm vào phần tử div 'parentDiv' với một số thông báo và tên lớp 'bdr'

    
        
        
        
        
        
            
            
            Add Divs
            

        

1. <. DOCTYPE html> thẻ hướng dẫn trình duyệt web về phiên bản của tệp HTML được viết bằng và nó không có bất kỳ thẻ kết thúc nào
2. The tag is used to indicate the beginning of HTML document.
3. As above shown tag is contain information about webpage and external file links are declared here.