Hướng dẫn how do you list an array in html? - làm thế nào để bạn liệt kê một mảng trong html?

Cải thiện bài viết

Lưu bài viết

Đọc

Bàn luận

Cải thiện bài viết

Lưu bài viết

Đọc

Bàn luận: Display the array [‘Ram’, ‘Shyam’, ‘Sita’, ‘Gita’ ] into an HTML list.

Trong bài viết này, chúng tôi sẽ tạo một danh sách HTML từ một mảng JavaScript. Điều này đôi khi cần thiết khi chúng tôi tìm nạp JSON từ bất kỳ nguồn nào và hiển thị dữ liệu vào mặt trận và trong nhiều trường hợp khác. & NBSP;

Tuyên bố vấn đề: Hiển thị mảng [‘ram,‘ shyam, ‘sita,‘ gita,] vào một danh sách HTML.Create the HTML skeleton.
Để đạt được điều này, chúng tôi sẽ làm theo các bước dưới đây.
  { let li = document.createElement['li']; ul.appendChild[li]; li.innerHTML += item; }];0head>

  { let li = document.createElement['li']; ul.appendChild[li]; li.innerHTML += item; }];5>
Bước 1: Tạo bộ xương HTML.
HTML
  7
```
let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];
```
5>
7html>

CácCreate a variable named list and get the element whose id is “myList”.

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

Bước 3: Bây giờ lặp lại tất cả các mục mảng bằng cách sử dụng JavaScript foreach và tại mỗi lần lặp, tạo một phần tử Li và đặt giá trị bên trong giống như mục hiện tại và nối LI vào danh sách.

Để đạt được điều này, chúng tôi sẽ làm theo các bước dưới đây.

{ let li = document.createElement['li']; ul.appendChild[li]; li.innerHTML += item; }];0head>

{ let li = document.createElement['li']; ul.appendChild[li]; li.innerHTML += item; }];5>

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

 {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

const options = [
    set0 = ['Option 1','Option 2'],
    set1 = ['First Option','Second Option','Third Option']
];

function makeUL[array] {
    // Create the list element
    let list = document.createElement['ul'];

    for [let i = 0; i < array.length; i++] {
        // Create the list item
        let item = document.createElement['li'];

        // Set its contents
        item.appendChild[document.createTextNode[array[i]]];

        // Add it to the list
        list.appendChild[item];
    }

    // Finally, return the constructed list
    return list;
}

// Add the contents of options[0] to #foo:
document.getElementById['foo'].appendChild[makeUL[options[0]]];

/**
 * Usage
 * Add an element to hold the data:
 * 
 */
makeUL[options.set0];

// or

makeUL[options.set1];

const options = [
    set0 = ['Option 1','Option 2'],
    set1 = ['First Option','Second Option','Third Option']
];

function makeUL[array] {
    // Create the list element
    let list = document.createElement['ul'];

    for [let i = 0; i < array.length; i++] {
        // Create the list item
        let item = document.createElement['li'];

        // Set its contents
        item.appendChild[document.createTextNode[array[i]]];

        // Add it to the list
        list.appendChild[item];
    }

    // Finally, return the constructed list
    return list;
}

// Add the contents of options[0] to #foo:
document.getElementById['foo'].appendChild[makeUL[options[0]]];

/**
 * Usage
 * Add an element to hold the data:
 * 
 */
makeUL[options.set0];

// or

makeUL[options.set1];

const options = [
    set0 = ['Option 1','Option 2'],
    set1 = ['First Option','Second Option','Third Option']
];

function makeUL[array] {
    // Create the list element
    let list = document.createElement['ul'];

    for [let i = 0; i < array.length; i++] {
        // Create the list item
        let item = document.createElement['li'];

        // Set its contents
        item.appendChild[document.createTextNode[array[i]]];

        // Add it to the list
        list.appendChild[item];
    }

    // Finally, return the constructed list
    return list;
}

// Add the contents of options[0] to #foo:
document.getElementById['foo'].appendChild[makeUL[options[0]]];

/**
 * Usage
 * Add an element to hold the data:
 * 
 */
makeUL[options.set0];

// or

makeUL[options.set1];

const options = [
    set0 = ['Option 1','Option 2'],
    set1 = ['First Option','Second Option','Third Option']
];

function makeUL[array] {
    // Create the list element
    let list = document.createElement['ul'];

    for [let i = 0; i < array.length; i++] {
        // Create the list item
        let item = document.createElement['li'];

        // Set its contents
        item.appendChild[document.createTextNode[array[i]]];

        // Add it to the list
        list.appendChild[item];
    }

    // Finally, return the constructed list
    return list;
}

// Add the contents of options[0] to #foo:
document.getElementById['foo'].appendChild[makeUL[options[0]]];

/**
 * Usage
 * Add an element to hold the data:
 * 
 */
makeUL[options.set0];

// or

makeUL[options.set1];

const options = [
    set0 = ['Option 1','Option 2'],
    set1 = ['First Option','Second Option','Third Option']
];

function makeUL[array] {
    // Create the list element
    let list = document.createElement['ul'];

    for [let i = 0; i < array.length; i++] {
        // Create the list item
        let item = document.createElement['li'];

        // Set its contents
        item.appendChild[document.createTextNode[array[i]]];

        // Add it to the list
        list.appendChild[item];
    }

    // Finally, return the constructed list
    return list;
}

// Add the contents of options[0] to #foo:
document.getElementById['foo'].appendChild[makeUL[options[0]]];

/**
 * Usage
 * Add an element to hold the data:
 * 
 */
makeUL[options.set0];

// or

makeUL[options.set1];

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

9>

HTML

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

 {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

03>

Các

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

11>4

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

11>6

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

03>

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

5>

7html>

Output:

Cách tạo danh sách HTML

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

30 dựa trên nội dung của mảng JavaScript hoặc cách tạo danh sách JavaScript.JavaScript array, or how to create a JavaScript list.

Bằng cách sửa đổi hàm

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

31 để chấp nhận các tham số và các thành phần đích, bạn có thể vượt qua các mảng khác nhau và tạo các danh sách khác nhau bên trong các thùng chứa khác nhau.

Giải pháp 1 1

Chức năng JavaScript vani này có các phụ thuộc bằng không và hoạt động trong tất cả các trình duyệt.

function makeList[] {
    // Establish the array which acts as a data source for the list
    let listData = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],

    // Make a container element for the list
    listContainer = document.createElement['div'],

    // Make the list
    listElement = document.createElement['ul'],

    // Set up a loop that goes through the items in listItems one at a time
    numberOfListItems = listData.length,
    listItem,
    i;

    // Add it to the page
    document.getElementsByTagName['body'][0].appendChild[listContainer];
    listContainer.appendChild[listElement];

    for [i = 0; i < numberOfListItems; ++i] {
        // Create an item for each one
        listItem = document.createElement['li'];

        // Add the item text
        listItem.innerHTML = listData[i];

        // Add listItem to the listElement
        listElement.appendChild[listItem];
    }
}

// Usage
makeList[];

Xem một bản demo jsfiddle & nbsp; ở đây.

Giải pháp 2

Chức năng này nhỏ gọn hơn và sử dụng vòng lặp

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

32:

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

Ở đây, một cách khác để làm điều đó, tương tự như giải pháp đầu tiên. Lưu ý rằng vòng lặp

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

32 chậm hơn một chút. Xem nó là giải pháp thứ ba dưới đây. Hãy kiểm tra thử nghiệm JSPERF này trong một trình duyệt hiện đại.
Check out this jsPerf test in a modern browser.

Giải pháp 3

const options = [
    set0 = ['Option 1','Option 2'],
    set1 = ['First Option','Second Option','Third Option']
];

function makeUL[array] {
    // Create the list element
    let list = document.createElement['ul'];

    for [let i = 0; i < array.length; i++] {
        // Create the list item
        let item = document.createElement['li'];

        // Set its contents
        item.appendChild[document.createTextNode[array[i]]];

        // Add it to the list
        list.appendChild[item];
    }

    // Finally, return the constructed list
    return list;
}

// Add the contents of options[0] to #foo:
document.getElementById['foo'].appendChild[makeUL[options[0]]];

/**
 * Usage
 * Add an element to hold the data:
 * 
 */
makeUL[options.set0];

// or

makeUL[options.set1];

Giải pháp này có thể được mở rộng để chuyển một tham số phần tử đến hàm

let items = [
        'Blue',
        'Red',
        'White',
        'Green',
        'Black',
        'Orange'
    ],
    ul = document.createElement['ul'];

document.getElementById['myItemList'].appendChild[ul];

items.forEach[item => {
    let li = document.createElement['li'];
    ul.appendChild[li];

    li.innerHTML += item;
}];

34 và hiển thị các mảng khác nhau trong các phần tử khác nhau.

Chuyên gia SEO kỹ thuật, lập trình viên JavaScript và nhà phát triển Stack Stack cao cấp. Trên một nhiệm vụ để thử nghiệm với Canvas, Webgl, JavaScript, SEO và WordPress, trong số nhiều thứ khác. Chủ sở hữu của GetButterfly.com, người sáng lập WPDublin và Speedfactor, đồng tổ chức của Dublin WordPress Meetup Group.

Nếu bạn thích bài viết này, hãy tiếp tục và theo dõi tôi trên Twitter hoặc mua cho tôi một ly cà phê để hỗ trợ công việc của tôi!, go ahead and follow me on Twitter or buy me a coffee to support my work!

Để đạt được điều này, chúng tôi sẽ làm theo các bước dưới đây.

let items = [ 'Blue', 'Red', 'White', 'Green', 'Black', 'Orange' ], ul = document.createElement['ul']; document.getElementById['myItemList'].appendChild[ul]; items.forEach[item => { let li = document.createElement['li']; ul.appendChild[li]; li.innerHTML += item; }];7

Để đạt được điều này, chúng tôi sẽ làm theo các bước dưới đây.

Giải pháp 1 1

Giải pháp 2

Giải pháp 3

Bài viết liên quan

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề

`let items = [ 'Blue', 'Red', 'White', 'Green', 'Black', 'Orange' ], ul = document.createElement['ul']; document.getElementById['myItemList'].appendChild[ul]; items.forEach[item => { let li = document.createElement['li']; ul.appendChild[li]; li.innerHTML += item; }];`
7