Tạo phần tử li trong javascript

Question

Trong hướng dẫn này, chúng ta sẽ xem cách nối thêm mục danh sách vào thẻ ul bằng JavaScript. Phương thức HTML DOM createElement(), phương thức createTextNode() và phương thức appendChild() có thể được sử dụng để thêm thẻ li vào thẻ ul

Nội dung chính Show

Phương thức tạo HTML DOM DOM ()
HTML DOM phương thức createTextNode()
Phương thức appendChild() HTML DOM
Mã JavaScript
Làm cách nào để tạo phần tử li trong JavaScript?
Làm cách nào để lấy các phần tử li trong JavaScript?
Làm cách nào để tạo một Li động trong JavaScript?
Làm cách nào để tạo phần tử JavaScript?

Mục lục

Phương thức tạo HTML DOM DOM ()

Phương thức HTML DOM createElement() tạo một nút phần tử hoặc thẻ HTML

Trong ví dụ này, phương thức createElement() sẽ tạo một mục danh sách hoặc thẻ li để thêm nó vào thẻ ul

HTML DOM phương thức createTextNode()

Phương thức HTML DOM createTextNode() tạo một nút văn bản

Trong ví dụ này, phương thức createTextNode() sẽ tạo một nút văn bản cho thẻ li. Nút văn bản này về cơ bản là một văn bản sẽ được viết bên trong thẻ li

Phương thức appendChild() HTML DOM

Phương thức HTML DOM appendChild() nối thêm hoặc thêm phần tử HTML vào một phần tử khác vì nó là phần tử con cuối cùng

Trong ví dụ này, phương thức appendChild() sẽ thêm mục danh sách vào thẻ ul làm con cuối cùng

Mã HTML

Mã HTML được đưa ra bên dưới, Mã này chứa thẻ ul với ba mục danh sách

Thẻ nút được sử dụng với sự kiện onclick để thực thi chức năng JavaScript

________0

Mã JavaScript

Mã JavaScript được cung cấp bên dưới, trong mã này trước tiên chúng tôi đã tạo một mục danh sách bằng phương thức createElement(), sau đó nút văn bản được tạo cho thẻ li này bằng phương thức createTextNode() và cuối cùng nút văn bản được thêm vào mục danh sách sau đó được thêm vào

Trong bài này, chúng ta 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 ở giao diện người dùng và trong nhiều trường hợp khác cũng vậy.

Báo cáo vấn đề. Hiển thị mảng [‘Ram’, ‘Shyam’, ‘Sita’, ‘Gita’ ] vào danh sách HTML

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

Bước 1. Tạo khung HTML

HTML

<!DOCTYPE html>

<html>

<head> </head>

<<2>

<4_______16__________<6<7_______16_______8<9<8html1<6>

<4_______16__________html6 html7html8html9html1html6>

>4_______16_______2>

>4html>

Bước 2. Tạo một biến có tên list và lấy phần tử có id là “myList”

Javascript

0html9 2

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à ở mỗi lần lặp lại, hãy tạo một phần tử li và đặt giá trị InternalText giống với mục hiện tại và nối thêm li vào danh sách

Phần tử HTML <li> được sử dụng để đại diện cho một mục trong danh sách. Nó phải được chứa trong một phần tử cha. một danh sách có thứ tự (<ol>), một danh sách không có thứ tự (<ul>) hoặc một thực đơn (<menu>). Trong các menu và danh sách không có thứ tự, các mục danh sách thường được hiển thị bằng dấu đầu dòng. Trong danh sách có thứ tự, chúng thường được hiển thị với bộ đếm tăng dần ở bên trái, chẳng hạn như một số hoặc chữ cái

Phần tử này bao gồm các thuộc tính toàn cục

Thuộc tính số nguyên này cho biết giá trị thứ tự hiện tại của mục danh sách như được xác định bởi phần tử <ol>. Giá trị được phép duy nhất cho thuộc tính này là một số, ngay cả khi danh sách được hiển thị bằng chữ số hoặc chữ cái La Mã. Liệt kê các mục theo sau mục này tiếp tục đánh số từ giá trị đã đặt. Thuộc tính giá trị không có ý nghĩa đối với danh sách không có thứ tự (<ul>) hoặc đối với menu (<menu>)

Không dùng nữa Không chuẩn

Thuộc tính ký tự này cho biết kiểu đánh số

<ol type="I">
  <li value="3">third item</li>
  <li>fourth item</li>
  <li>fifth item</li>
</ol>

2. chữ viết thường

<ol type="I">
  <li value="3">third item</li>
  <li>fourth item</li>
  <li>fifth item</li>
</ol>

3. chữ in hoa

<ol type="I">
  <li value="3">third item</li>
  <li>fourth item</li>
  <li>fifth item</li>
</ol>

4. chữ số La Mã viết thường

<ol type="I">
  <li value="3">third item</li>
  <li>fourth item</li>
  <li>fifth item</li>
</ol>

5. chữ số La Mã viết hoa

<ol type="I">
  <li value="3">third item</li>
  <li>fourth item</li>
  <li>fifth item</li>
</ol>

6. con số

Loại này ghi đè loại được sử dụng bởi phần tử mẹ <ol> của nó, nếu có

Ghi chú. Thuộc tính này không được dùng nữa;

Để biết thêm các ví dụ chi tiết, hãy xem các trang <ol> và <ul>

<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ol>

<ol type="I">
  <li value="3">third item</li>
  <li>fourth item</li>
  <li>fifth item</li>
</ol>

________số 8_______

Danh mục nội dung Không có. nội dung được phép. Bỏ qua thẻCó thể bỏ qua thẻ kết thúc nếu mục danh sách được theo ngay bởi một phần tử <li> khác hoặc nếu không có thêm nội dung nào trong phần tử chính của nó. Cha mẹ được phépMột yếu tố <ul>, <ol> hoặc <menu>. Mặc dù không phải là cách sử dụng phù hợp, nhưng lỗi thời

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

5 cũng có thể là cha mẹ. Vai trò ARIA ngầm định

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

6 khi là con của một

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

7,

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

8 hoặc

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

9Các vai trò ARIA được phép<li>0, <li>1, <li>2, <li>3, <li>4, <li>5, <li>6, <li>7, <li>8, <li>9DOM giao diện_______59_______0

Làm cách nào để tạo phần tử li trong JavaScript?

let list = document. getElementById("myList" ); . 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 lại, tạo phần tử li và đặt giá trị InternalText giống với mục hiện tại, đồng thời nối thêm li vào danh sách.