Hiển thị mảng trong HTML JavaScript

Question

Khi làm việc với mảng trong JavaScript, bạn sẽ muốn in ra các phần tử của mảng

Nội dung chính Show

Làm cách nào để hiển thị một mảng trong JavaScript HTML?
Làm cách nào để hiển thị dữ liệu trong HTML bằng JavaScript?
Làm cách nào để in một phần tử mảng trong JavaScript?

Trong môi trường trình duyệt, bạn có hai tùy chọn, sử dụng hàm console.log() hoặc ghi nó vào DOM

Trong bài đăng này, chúng ta sẽ xem các ví dụ về hai cách tốt nhất để in ra mảng của bạn

Cách dễ nhất để in ra một mảng là sử dụng hàm console.log()

Bạn có thể lặp qua từng phần tử, in ra từng phần tử một

Đầu tiên, hãy bắt đầu với mảng của chúng ta

	const array = [1, 2, 3, 4, 5];

Sau đó, hãy lặp qua mảng và in ra từng phần tử

	const array = [1, 2, 3, 4, 5];

for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

Để ghi mảng của bạn vào DOM, trước tiên bạn cần chuyển đổi mảng của mình thành một chuỗi

Rất may, chúng ta có thể tận dụng chức năng

	const array = [1, 2, 3, 4, 5];

for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

1 để làm điều này

Chúng ta có thể yêu cầu hàm

	const array = [1, 2, 3, 4, 5];

for (let i = 0; i < array.length; i++) {
    console.log(array[i]);
}

1 chuyển đổi mảng của chúng ta thành một chuỗi và sau đó chúng ta có thể ghi chuỗi đó vào DOM

	const array = [1, 2, 3, 4, 5];

const string = JSON.stringify(array);

document.querySelector(".output").innerHTML = string;

	[1, 2, 3, 4, 5]

Đây là một ví dụ đầy đủ

	

    
        JavaScript Array example

Bạn đã in thành công mảng của mình tới DOM

Trong bài đăng này, chúng tôi đã xem xét các ví dụ về hai cách tốt nhất để in ra mảng của bạn

Hai cách là sử dụng hàm console.log() và sau đó viết kết quả trực tiếp vào DOM

Hy vọng rằng, bài viết này đã được hữu ích cho bạn

Nếu bạn muốn tìm hiểu về phát triển web, thành lập công ty khởi nghiệp, khởi động SaaS, v.v., hãy theo dõi tôi trên Twitter. Bạn cũng có thể tham gia cuộc trò chuyện tại Discord chính thức của chúng tôi

Khi cần in các phần tử của mảng, bạn có thể lặp lại mảng và in từng phần tử ra console như sau

let arr = ["Jack", "John", "James"];

for(let i = 0; i < arr.length; i++){
  console.log(arr[i]);
}

Các phần tử mảng sẽ được in ra bàn điều khiển như sau

> "Jack"
> "John"
> "James"

Bây giờ đôi khi bạn muốn các phần tử được in ở định dạng đẹp trên trang web. Bạn có thể làm như vậy bằng cách gán mảng là thuộc tính innerHTML của một phần tử

Đây là một ví dụ


<html>
  <head>
    <meta charset="utf-8" />
    <title>JavaScript print arraytitle>
  head>
  <body>
    <pre id="arrPrint">pre>
    <script>
      let arr = ["Jack", "John", "James"];
      document.getElementById("arrPrint").innerHTML = arr;
    script>
  body>
html>

Nhưng khi bạn có một mảng các đối tượng, thì phần tử innerHTML sẽ được đặt thành [object Object] thay vì các phần tử mảng. Để in một mảng đối tượng đúng cách, bạn cần định dạng mảng dưới dạng chuỗi JSON bằng phương thức JSON.stringify() và đính kèm chuỗi vào thẻ

trong trang HTML của bạn

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

Để in một mảng đối tượng đúng cách, bạn cần định dạng mảng dưới dạng chuỗi JSON bằng cách sử dụng JSON. stringify() và đính kèm chuỗi vào thẻ . Và đó là cách bạn có thể in các phần tử mảng JavaScript lên trang web.

Làm cách nào để hiển thị dữ liệu trong HTML bằng JavaScript?

JavaScript có thể "hiển thị" dữ liệu theo nhiều cách khác nhau. .

Viết vào phần tử HTML, sử dụng InternalHTML

Viết vào đầu ra HTML bằng tài liệu. viết()

Viết vào hộp cảnh báo, sử dụng cửa sổ. báo động()

Viết vào bảng điều khiển trình duyệt, sử dụng bảng điều khiển. nhật ký()

Làm cách nào để in một phần tử mảng trong JavaScript?

for (i = 0; i < mảng. chiều dài; . writeln((i+1) + ". " + mảng[i]); Và sử dụng tài liệu

programming javascript

Hiển thị mảng trong HTML JavaScript

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

Làm cách nào để hiển thị dữ liệu trong HTML bằng JavaScript?

Làm cách nào để in một phần tử mảng trong JavaScript?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội