Tạo khối html trong javascript

Điều này được chứng minh dễ dàng nhất với một ví dụ đơn giản. Đầu tiên, một số CSS đơn giản mà chúng ta sẽ sử dụng

.highlight {
  background-color: #ee3;
}

Hãy xem ví dụ sau thể hiện một phần tử nội tuyến

<div>
  The following span is an <span class="highlight">inline elementspan>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
div>

Trong ví dụ này, phần tử cấp khối

<div>
  The following span is an <span class="highlight">inline elementspan>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
div>

<div>
  The following span is an <span class="highlight">inline elementspan>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
div>

<div>
  The following span is an <span class="highlight">inline elementspan>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
div>

body {
  margin: 0;
  padding: 4px;
  border: 1px solid #333;
}

.highlight {
  background-color: #ee3;
}

Bây giờ, hãy thay đổi

<div>
  The following span is an <span class="highlight">inline elementspan>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
div>

<div>
  The following span is an <span class="highlight">inline elementspan>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
div>

<div>
  The following paragraph is a
  <p class="highlight">block-level element;p>
  its background has been colored to display both the beginning and end of the
  block-level element's influence.
div>

body {
  margin: 0;
  padding: 4px;
  border: 1px solid #333;
}

.highlight {
  background-color: #ee3;
}

Được hiển thị bằng CSS giống như trước đây, chúng tôi nhận được

Thấy sự khác biệt? . văn bản trước

<div>
  The following span is an <span class="highlight">inline elementspan>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
div>

<div>
  The following span is an <span class="highlight">inline elementspan>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
div>

<div>
  The following span is an <span class="highlight">inline elementspan>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
div>

Bạn có thể thay đổi cách trình bày trực quan của một phần tử bằng thuộc tính CSS

<div>
  The following span is an <span class="highlight">inline elementspan>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
div>

<div>
  The following span is an <span class="highlight">inline elementspan>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
div>

<div>
  The following span is an <span class="highlight">inline elementspan>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
div>

<div>
  The following span is an <span class="highlight">inline elementspan>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
div>

<div>
  The following span is an <span class="highlight">inline elementspan>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
div>

<div>
  The following span is an <span class="highlight">inline elementspan>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
div>

<div>
  The following span is an <span class="highlight">inline elementspan>; its
  background has been colored to display both the beginning and end of the
  inline element's influence.
div>

body {
  margin: 0;
  padding: 4px;
  border: 1px solid #333;
}

.highlight {
  background-color: #ee3;
}

Tóm lại, đây là những khác biệt cơ bản về khái niệm giữa các phần tử cấp khối và cấp khối

Nói chung, các phần tử nội tuyến chỉ có thể chứa dữ liệu và các phần tử nội tuyến khác. Một ngoại lệ là phần tử

body {
  margin: 0;
  padding: 4px;
  border: 1px solid #333;
}

.highlight {
  background-color: #ee3;
}

body {
  margin: 0;
  padding: 4px;
  border: 1px solid #333;
}

.highlight {
  background-color: #ee3;
}

Ghi chú. Các liên kết bao bọc nhiều dòng nội dung cấp khối tạo ra trải nghiệm kém đến mức không thể sử dụng được đối với một số công nghệ hỗ trợ và nên tránh

Theo mặc định, các phần tử nội tuyến không buộc một dòng mới bắt đầu trong luồng tài liệu. Mặt khác, các phần tử khối thường gây ra hiện tượng ngắt dòng (mặc dù, như thường lệ, điều này có thể được thay đổi bằng CSS)

Các phần tử sau đây là nội tuyến theo mặc định (mặc dù các phần tử khối và nội tuyến không còn được xác định trong HTML 5, thay vào đó hãy sử dụng các danh mục nội dung)

Làm cách nào để tạo khối HTML trong JavaScript?

JavaScript có thể tạo các phần tử HTML không?

Làm cách nào để đặt HTML bằng JavaScript?

Làm cách nào để thêm div HTML trong JavaScript?