Hiển thị một mảng trong html

document.write sẽ chỉ ghi đè lên bất cứ thứ gì có trong thẻ và bắt đầu lại từ đầu, vì vậy nó không hữu ích lắm ở đây. Cách tiếp cận của bạn với ________ 10 (lưu ý, không phải “getElementbyId”. ) thực sự không sao, nhưng vì bạn đang gán giá trị do

1 trả về cho

của thuộc tính

2, thì hàm

1 của bạn thực sự nên

4 một giá trị. Bạn có thể làm điều đó như thế này.

function register(){
    // caution: drop the "new Array" part or it won't work!
    var ids = ['name','lname','email','password','cpassword'];
    var printThis = "";
    for(var i = 0; i < ids.length; i++){
        printThis += "
"+ids[i];
    }
    return printThis; // <-- to be printed to the div
}
document.getElementById('ids').innerHTML = register();

Ngoài ra còn có một tùy chọn khác mà bạn không phải tạo một chuỗi trước, nhưng hãy nối các mục mảng vào đó

từng cái một. Tôi trình bày cả hai tùy chọn trong JSBin này. Tuy nhiên, xin lưu ý rằng thiết lập của bạn sẽ không hoạt động bên ngoài JSBin, vì không có gì kích hoạt việc thực thi tập lệnh. Ngoài ra, các giá trị đầu vào của biểu mẫu của bạn sẽ không được vận chuyển một cách kỳ diệu vào mảng đó, tôi hy vọng bạn biết điều đó. Việc giải thích cách đọc các giá trị đầu vào của biểu mẫu nằm ngoài phạm vi của câu hỏi này, nhưng tôi có thể cho bạn biết cách kích hoạt tập lệnh để bạn thực sự thấy điều gì đó khi không có trong JSBin. bọc tất cả tập lệnh của bạn trong một chức năng, chẳng hạn như

5. Sau đó thêm phần sau vào thẻ của bạn.

thì tập lệnh của bạn sẽ được thực thi một lần khi tải trang

Trong bài học này, chúng ta sẽ xem lại cách in nội dung của một mảng lên một trang web. Để làm điều này, chúng tôi sẽ sử dụng trang web bạn đang truy cập ngay bây giờ

In một mảng nguyên thủy

---

Để in một mảng nguyên thủy tới một trang web, chúng ta có thể đặt giá trị của thuộc tính

6 của một phần tử đoạn văn thành một mảng. Hãy thử điều này trong bảng điều khiển DevTools. Trong ví dụ này, chúng tôi sẽ tạo mã xuất ra phần bên dưới có tiêu đề "đầu ra"

Đầu tiên, chúng ta sẽ tạo ba thành phần đoạn văn và chúng ta sẽ thêm từng thành phần vào div ẩn bên dưới trên trang này. Chúng tôi sẽ sử dụng 3 yếu tố đoạn văn, vì vậy chúng tôi có thể xem tất cả các ví dụ cạnh nhau

> const div = document.querySelector("div#lesson-ex");
undefined
> div;

> const p1 = document.createElement("p");
undefined
> const p2 = document.createElement("p");
undefined
> const p3 = document.createElement("p");
undefined
> div.append(p1, p2, p3);

Tuyệt quá. Bây giờ chúng tôi có ba thẻ P trống mà chúng tôi có thể sử dụng để in nội dung của ba mảng. Tiếp theo, hãy tạo một vài mảng và thử xuất chúng bên dưới

> const numAr = [2,4,6,8];
> const stringAr = ["Rhino", "Hippo", "Dingo", "Dodo", "Flamingo"];
> const morePrimitives = [true, false, undefined, null];

Bây giờ, hãy thử in chúng ra đầu ra bên dưới

> p1.innerText = numAr;
> p2.innerText = stringAr;
> p3.innerText = morePrimitives;

Như chúng ta sẽ thấy bên dưới trong phần đầu ra cũng như trong hình ảnh tiếp theo, nội dung của mảng được in ra và mỗi phần tử được phân tách bằng dấu phẩy. Đây là tiêu chuẩn khi sử dụng phương pháp in nội dung của một mảng nguyên hàm. mỗi phần tử luôn được phân tách bằng dấu phẩy. Nếu chúng ta muốn thêm dấu cách vào giữa các dấu phẩy của mỗi giá trị, thì chúng ta sẽ phải thực hiện thêm một bước

Cũng lưu ý rằng

7 và

8 không được trình bày trên trang, nhưng chúng vẫn được phân tách bằng dấu phẩy

đầu ra

Có một div bên dưới dòng này, nơi chúng ta sẽ in các mảng ví dụ từ bài học này

---

---

Định dạng các giá trị mảng để in trong một đoạn văn

Để định dạng các giá trị mảng của chúng ta, chúng ta có thể sử dụng phương thức mảng tích hợp sẵn

9. Phương thức này sẽ biến một mảng thành một chuỗi, tách từng phần tử bằng đối số mà chúng ta truyền vào phương thức. Hãy xem một số ví dụ

> p1.innerText = numAr.join(" and ");
> p2.innerText = stringAr.join(", ");
> p3.innerText = morePrimitives.join();

Như chúng ta có thể thấy trong hình bên dưới và phần "đầu ra" ở trên, đối số mà chúng ta chuyển vào phương thức

9 xác định cách mảng của chúng ta được nối lại với nhau thành một chuỗi

In một mảng các đối tượng

---

Chúng ta không thể in một mảng các đối tượng (như các đối tượng phần tử HTML) vào một trang web giống như chúng ta đã làm với một mảng các đối tượng nguyên thủy. Hãy xem một ví dụ

> const pTag = document.createElement("p");
undefined
> const input = document.createElement("input");
undefined
> const objArray = [pTag,input];
undefined
> p1.innerText = objArray.join(" and ");

Nếu chúng ta tìm kiếm trong phần "đầu ra" ở trên hoặc hình ảnh bên dưới, chúng ta sẽ thấy các đối tượng phần tử HTML của chúng ta không in như các đối tượng nguyên thủy.

> const numAr = [2,4,6,8];
> const stringAr = ["Rhino", "Hippo", "Dingo", "Dodo", "Flamingo"];
> const morePrimitives = [true, false, undefined, null];

0. Lưu ý rằng điều này đúng với bất kỳ đối tượng nào, không chỉ các đối tượng phần tử HTML

vậy chúng ta có thể làm gì?

Một ví dụ điển hình về việc lặp qua một mảng các đối tượng phần tử HTML là dự án Khảo sát Giao thông vận tải mà chúng ta đã sử dụng để tìm hiểu cách triển khai các hộp kiểm trước đó trong phần khóa học này. Trong dự án đó, chúng tôi đã tạo các phần tử đoạn mới cho mọi tùy chọn vận chuyển mà người dùng đã chọn và thêm từng đoạn vào DOM trong phần 'kết quả'

Làm cách nào để thêm mảng vào HTML?

Làm cách nào để in một mảng trong HTML?

Làm cách nào để hiển thị một mảng trong HTML bằng JavaScript?

Làm cách nào để tạo một mảng trong HTML?