Làm cách nào để thêm thẻ HTML?

Đối tượng Document cung cấp một phương thức createElement[] để tạo một phần tử và phương thức appendChild[] để thêm nó vào HTML DOM. Sau đây là các bước liên quan đến việc tạo HTML DOM −

Bước 1 - Để chèn một phần tử vào HTML DOM, trước tiên, chúng ta cần tạo một phần tử và nối vào HTML DOM. Tài liệu. createElement[] được sử dụng để tạo phần tử HTML. Cú pháp để tạo một phần tử được hiển thị bên dưới

document.createElement[tagName[, options]];

Ở đâu,

• tagName là tên của thẻ sẽ được tạo. thẻ là của

  loại

• tham số tùy chọn là một đối tượng phần tử tùy chọn

Bước 2 – Sau khi tạo thẻ, chúng ta cần tạo văn bản để gán cho thẻ. Cú pháp để tạo một nút văn bản được hiển thị bên dưới

Document.createTextNode[“String”];

Bước 3 – Sau khi tạo văn bản, chúng ta cần thêm văn bản vào phần tử

gõ và do đó cuối cùng thêm vào thẻ div. Cú pháp để nối phần tử vào thẻ được hiển thị bên dưới

appendChild[parameter];

ví dụ 1

Trong ví dụ sau, ban đầu phần div chỉ bao gồm 2 văn bản. Nhưng sau này, một văn bản nữa được tạo và thêm vào phần div như trong đầu ra

   

      
Tutorix
      
Tutorialspoint
   

   

Khi thực thi đoạn mã trên, đầu ra sau được tạo

ví dụ 2

Sau đây là chương trình ví dụ về cách thêm phần tử vào HTML DOM. Ở đây, phương thức insertB Before được sử dụng thay cho phương thức append để thêm phần tử vào thẻ div

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách dễ dàng mở rộng ngôn ngữ HTML bằng các thẻ tùy chỉnh. Các thẻ tùy chỉnh có thể được sử dụng để triển khai các hành vi khác nhau, vì vậy chúng là một cách rất thuận tiện để viết ít mã hơn và giữ cho tài liệu HTML của bạn đơn giản hơn

Để tiến xa hơn với các thẻ tùy chỉnh, hãy xem bài đăng của tôi về cách tạo các thẻ tùy chỉnh được đóng gói với Shadow DOM

• Mở rộng HTML với các thẻ tùy chỉnh và Shadow DOM

  Divya Dev

  13 Thg 11 2022

Thẻ HTML tùy chỉnh là gì?

Ví dụ, với HTML, bạn sử dụng thẻ

2

36 để hiển thị văn bản in đậm. Nếu bạn cần một danh sách, thì bạn sử dụng thẻ

2

37 với thẻ con của nó 

2

38 cho mỗi mục trong danh sách. Các thẻ được trình duyệt diễn giải và cùng với CSS, xác định cách hiển thị nội dung của trang web cũng như cách các phần của nội dung hoạt động

Đôi khi, chỉ sử dụng một thẻ HTML là không đủ cho các chức năng cần thiết trong ứng dụng web. Thông thường, vấn đề này được giải quyết bằng cách sử dụng nhiều thẻ HTML cùng với JavaScript và CSS, nhưng giải pháp này không đẹp lắm.  

Một giải pháp tinh tế hơn sẽ là sử dụng thẻ tùy chỉnh—một mã định danh được đính kèm trong

2

39 được trình duyệt giải thích để hiển thị chức năng dự định của chúng tôi. Giống như các thẻ HTML thông thường, chúng tôi có thể sử dụng thẻ tùy chỉnh nhiều lần trên một trang và chúng tôi cũng có thể có các thuộc tính thẻ và thẻ phụ để hỗ trợ chức năng của thẻ tùy chỉnh

Nói một cách đơn giản hơn, các yếu tố tùy chỉnh có thể được sử dụng để mở khóa các tính năng sau

• xác định và xây dựng các phần tử HTML mới
• xây dựng các phần tử mở rộng các phần tử khác
• tạo các yếu tố có thể kết hợp các chức năng tùy chỉnh trong ứng dụng của bạn
• sử dụng các phần tử DOM hiện có và mở rộng API của chúng

Trong bài đăng này, chúng ta sẽ tìm hiểu về các yếu tố tùy chỉnh bằng cách xây dựng thẻ tùy chỉnh có tên là

2

40. Thẻ tùy chỉnh này sẽ hiển thị ảnh Gravatar cho một địa chỉ email nhất định.  

API

2

41 trong các trình duyệt hiện đại giúp việc này trở nên dễ dàng

1. Tạo dự án

Để triển khai và kiểm tra thẻ của chúng tôi, chúng tôi sẽ cần tạo một số thứ

• một chỉ số. html để sử dụng thẻ tùy chỉnh
• một mã hóadude-gravatar. js để triển khai thẻ tùy chỉnh

2. Sửa đổi chỉ mục. html

Hãy chỉnh sửa chỉ mục. html và làm cho nội dung của nó trông như thế này

Document.createTextNode[“String”];

0__

Document.createTextNode[“String”];

1

2

Document.createTextNode[“String”];

3

Document.createTextNode[“String”];

4

Document.createTextNode[“String”];

5

Document.createTextNode[“String”];

6

Document.createTextNode[“String”];

7

Document.createTextNode[“String”];

8

Document.createTextNode[“String”];

9

Document.createTextNode[“String”];

10

Document.createTextNode[“String”];

11

Document.createTextNode[“String”];

12

Document.createTextNode[“String”];

13

Document.createTextNode[“String”];

14

Document.createTextNode[“String”];

15

Document.createTextNode[“String”];

16

Document.createTextNode[“String”];

17

Document.createTextNode[“String”];

18

Document.createTextNode[“String”];

19

Nếu chúng tôi tải chỉ mục. html trong trình duyệt, kết quả không ấn tượng lắm vì chúng tôi vẫn chưa triển khai mã cho thẻ tùy chỉnh của mình.  

Một điều cần lưu ý là trình duyệt rất dễ tha thứ, vì vậy bạn có thể có các thẻ không xác định trong tài liệu và trình duyệt sẽ bỏ qua chúng. Để thẻ tùy chỉnh của chúng tôi thực sự hiển thị ảnh Gravatar cho email của tôi, trước tiên chúng tôi phải hiểu cách thức hoạt động của Gravatar

3. Đăng ký thẻ mới

Bước 1. Chọn đúng tên

Để tạo thẻ tùy chỉnh, bạn cần sử dụng

2

42

Đối số đầu tiên trong

2

43 là tên của thẻ. Đây là những gì chúng tôi đã đề cập trong tệp HTML. Tên phải luôn có dấu gạch ngang [-]. Các thẻ có tên như

2

44 không hợp lệ. Điều này cho phép trình phân tích cú pháp có thể phân biệt phần tử thông thường với thẻ tùy chỉnh.  

Tên thẻ thành phần tùy chỉnh phải luôn có dấu gạch ngang [-]

Bước 2. Chọn nguyên mẫu phù hợp

2

43 có một đối tượng tùy chọn thứ hai. Đối tượng này được sử dụng để đề cập đến nguyên mẫu của phần tử mới. Theo mặc định, các phần tử tùy chỉnh kế thừa từ

2

46. Đoạn mã trên tương đương với đoạn mã sau

Document.createTextNode[“String”];

0

2

1

Nếu bạn muốn tạo một phần tử tùy chỉnh, mở rộng một phần tử HTML khác, thì phần tử gốc phải được mở rộng trong

2

43. Phần tử tùy chỉnh kế thừa phần tử gốc còn được gọi là "phần tử tùy chỉnh của tiện ích mở rộng loại".  

Document.createTextNode[“String”];

0

2

3

2

Một vài điều nữa cần chú ý

• Bạn không thể đăng ký thẻ nhiều lần. Nếu bạn thử điều này, trình duyệt sẽ ném một thông báo

  2

  48
• Thẻ phần tử tùy chỉnh không thể tự đóng

4. Khởi tạo phần tử tùy chỉnh

Tất cả các quy tắc tiêu chuẩn của các phần tử HTML áp dụng cho các phần tử tùy chỉnh. Cũng giống như các phần tử tiêu chuẩn, bạn có thể tạo một phần tử tùy chỉnh trong DOM bằng JavaScript hoặc khai báo nó trong HTML

Khai báo các phần tử tùy chỉnh trong HTML

Document.createTextNode[“String”];

0

2

6

Tạo phần tử tùy chỉnh trong DOM bằng JavaScript

Document.createTextNode[“String”];

0____48____4

Document.createTextNode[“String”];

30

Khởi tạo các phần tử mở rộng loại trong HTML

Document.createTextNode[“String”];

0

Document.createTextNode[“String”];

32

Tạo phần tử mở rộng loại trong DOM bằng JavaScript

Document.createTextNode[“String”];

0

Document.createTextNode[“String”];

34

5. Thêm đánh dấu vào Thẻ tùy chỉnh

Thêm đánh dấu khá đơn giản trong thẻ tùy chỉnh. Để bắt đầu, bạn cần tạo một lớp mở rộng phần tử HTML gốc. Trong trường hợp của chúng tôi, chúng tôi sẽ gia hạn

2

46. Bên trong

2

46, chúng tôi sẽ sử dụng

2

51 để thêm trình lắng nghe sự kiện và điều chỉnh

2

52 của thẻ tùy chỉnh. Nhớ gọi

2

53 vì nó sẽ giúp kế thừa các phương thức và thuộc tính của lớp cha. Luôn nhớ rằng,

2

54 bên trong hàm tạo trỏ đến phần tử tùy chỉnh được tạo

Đây là một tổng quan đơn giản về cách thành phần của chúng tôi sẽ trông như thế nào

Document.createTextNode[“String”];

0_______136

2

Document.createTextNode[“String”];

38

Document.createTextNode[“String”];

4

Document.createTextNode[“String”];

40

Document.createTextNode[“String”];

6

Document.createTextNode[“String”];

42

Document.createTextNode[“String”];

8

Document.createTextNode[“String”];

44

Document.createTextNode[“String”];

10

Document.createTextNode[“String”];

46

Document.createTextNode[“String”];

12

Document.createTextNode[“String”];

48

Document.createTextNode[“String”];

14

Document.createTextNode[“String”];

50

Document.createTextNode[“String”];

16

Document.createTextNode[“String”];

52

Document.createTextNode[“String”];

18

Document.createTextNode[“String”];

54

6. Phương pháp vòng đời

Trước khi bắt đầu thêm đánh dấu vào thẻ tùy chỉnh, bạn cần biết các phương thức vòng đời được liên kết với thẻ tùy chỉnh. Có bốn cuộc gọi lại vòng đời

Mục đích gọi lại

2

51một phiên bản của phần tử thẻ tùy chỉnh được tạo

2

56một phiên bản của phần tử thẻ tùy chỉnh được chèn vào tài liệu

2

57một phiên bản của phần tử thẻ tùy chỉnh bị xóa khỏi tài liệu

2

58một thuộc tính trong phần tử thẻ tùy chỉnh đã được thêm, xóa hoặc cập nhật

Khung của thẻ tùy chỉnh của chúng tôi với các cuộc gọi lại này sẽ trông như sau

_______10_______136

2

Document.createTextNode[“String”];

58

Document.createTextNode[“String”];

4

Document.createTextNode[“String”];

60

Document.createTextNode[“String”];

6

Document.createTextNode[“String”];

62

Document.createTextNode[“String”];

8

Document.createTextNode[“String”];

64

Document.createTextNode[“String”];

10

Document.createTextNode[“String”];

66

Document.createTextNode[“String”];

12

Document.createTextNode[“String”];

62

Document.createTextNode[“String”];

14

Document.createTextNode[“String”];

64

Document.createTextNode[“String”];

16

Document.createTextNode[“String”];

72

Document.createTextNode[“String”];

18

Document.createTextNode[“String”];

62

Document.createTextNode[“String”];

75

Document.createTextNode[“String”];

64

Document.createTextNode[“String”];

77

Document.createTextNode[“String”];

78

Document.createTextNode[“String”];

79

Document.createTextNode[“String”];

62_______162______162______162___3___1

Chúng ta đã thấy cách sử dụng

2

51 trong phần tử tùy chỉnh. Bây giờ, hãy sử dụng các phương thức gọi lại khác trong mã của chúng ta. Hãy bắt đầu với

2

56

2

56

Có thể sử dụng

2

56 để kiểm tra thuộc tính email trong thẻ tùy chỉnh của chúng tôi. Ngay sau khi phần tử được thêm vào tài liệu, quá trình kiểm tra này sẽ diễn ra. Chúng tôi sẽ sử dụng hàm

2

63 để kiểm tra xem

2

64 có thuộc tính

2

65 hay không

Document.createTextNode[“String”];

0

Document.createTextNode[“String”];

36

2

Document.createTextNode[“String”];

88

Document.createTextNode[“String”];

4

Document.createTextNode[“String”];

90

Document.createTextNode[“String”];

6

Document.createTextNode[“String”];

50

Document.createTextNode[“String”];

8

Document.createTextNode[“String”];

38

Document.createTextNode[“String”];

10

Document.createTextNode[“String”];

40

Document.createTextNode[“String”];

12

Document.createTextNode[“String”];

42

Document.createTextNode[“String”];

14

Document.createTextNode[“String”];

44

Document.createTextNode[“String”];

16

Document.createTextNode[“String”];

46

Document.createTextNode[“String”];

18

Document.createTextNode[“String”];

48

Document.createTextNode[“String”];

75

Document.createTextNode[“String”];

50

Document.createTextNode[“String”];

77

Document.createTextNode[“String”];

108

Document.createTextNode[“String”];

79

Document.createTextNode[“String”];

110

Document.createTextNode[“String”];

81

Document.createTextNode[“String”];

112

Document.createTextNode[“String”];

83

Document.createTextNode[“String”];

114

Document.createTextNode[“String”];

115

Document.createTextNode[“String”];

116

Document.createTextNode[“String”];

117

Document.createTextNode[“String”];

64

Document.createTextNode[“String”];

119

Document.createTextNode[“String”];

120

Document.createTextNode[“String”];

121

Document.createTextNode[“String”];

122

Document.createTextNode[“String”];

123

Document.createTextNode[“String”];

124

Document.createTextNode[“String”];

125

Document.createTextNode[“String”];

64

Document.createTextNode[“String”];

127

Document.createTextNode[“String”];

50

Document.createTextNode[“String”];

129

Document.createTextNode[“String”];

52

Khi thẻ tùy chỉnh được chèn vào HTML, bạn sẽ thấy nội dung như thế này

Document.createTextNode[“String”];

0

2

6

Tuy nhiên khi đặt thuộc tính

2

65 trong thẻ tùy chỉnh thì màn hình sẽ như sau

Document.createTextNode[“String”];

0____1134

2

67

Trình duyệt sẽ gọi phương thức vòng đời

2

67 cho tất cả các thuộc tính được liệt kê trong mảng

2

69. Mục tiêu đằng sau điều này là cải thiện hiệu suất của thẻ tùy chỉnh. Ví dụ: nếu người dùng quyết định thay đổi kiểu, bạn sẽ không muốn

2

67 bị kích hoạt. Trong trường hợp của chúng tôi, chúng tôi muốn

2

67 chỉ được gọi khi email thay đổi. Để đạt được điều này, mã sẽ xuất hiện như sau

Document.createTextNode[“String”];

0

Document.createTextNode[“String”];

36

2

Document.createTextNode[“String”];

88

Document.createTextNode[“String”];

4

Document.createTextNode[“String”];

90

Document.createTextNode[“String”];

6

Document.createTextNode[“String”];

50

Document.createTextNode[“String”];

8

Document.createTextNode[“String”];

38

Document.createTextNode[“String”];

10

Document.createTextNode[“String”];

40

Document.createTextNode[“String”];

12

Document.createTextNode[“String”];

42

Document.createTextNode[“String”];

14

Document.createTextNode[“String”];

44

Document.createTextNode[“String”];

16

Document.createTextNode[“String”];

46

Document.createTextNode[“String”];

18

Document.createTextNode[“String”];

48

Document.createTextNode[“String”];

75

Document.createTextNode[“String”];

50

Document.createTextNode[“String”];

77

Document.createTextNode[“String”];

108

Document.createTextNode[“String”];

79

Document.createTextNode[“String”];

110

Document.createTextNode[“String”];

81

Document.createTextNode[“String”];

112

Document.createTextNode[“String”];

83

Document.createTextNode[“String”];

164

Document.createTextNode[“String”];

115

Document.createTextNode[“String”];

166

Document.createTextNode[“String”];

117

Document.createTextNode[“String”];

64

Document.createTextNode[“String”];

119

Document.createTextNode[“String”];

120

Document.createTextNode[“String”];

121

Document.createTextNode[“String”];

122

Document.createTextNode[“String”];

123

Document.createTextNode[“String”];

124

Document.createTextNode[“String”];

125

Document.createTextNode[“String”];

64

Document.createTextNode[“String”];

127

Document.createTextNode[“String”];

50

Document.createTextNode[“String”];

129

Document.createTextNode[“String”];

180

Document.createTextNode[“String”];

181

Document.createTextNode[“String”];

182

Document.createTextNode[“String”];

183

Document.createTextNode[“String”];

50

Document.createTextNode[“String”];

185

Document.createTextNode[“String”];

186

Document.createTextNode[“String”];

187

Document.createTextNode[“String”];

188

Document.createTextNode[“String”];

189

Document.createTextNode[“String”];

190

Document.createTextNode[“String”];

191

Document.createTextNode[“String”];

64

Document.createTextNode[“String”];

193

Document.createTextNode[“String”];

50

Document.createTextNode[“String”];

195

Document.createTextNode[“String”];

52

Dựa trên đoạn mã trên, một cảnh báo sẽ xuất hiện mỗi khi chúng tôi thay đổi email

Các cuộc gọi lại trong các phần tử tùy chỉnh là đồng bộ. Nếu bạn gọi

2

72 trên phần tử tùy chỉnh, trình duyệt sẽ kích hoạt

2

73 ngay lập tức.  

2

57

Cuối cùng trong danh sách các phương pháp vòng đời của chúng tôi sẽ là

2

57. Thời điểm bạn xóa phần tử khỏi tài liệu, phương thức này sẽ được gọi. Phương pháp này cực kỳ hữu ích khi bạn muốn dọn sạch những ảnh hưởng do custom tag gây ra. Bạn có thể xóa các thẻ tùy chỉnh một cách dễ dàng bằng cách sử dụng phương pháp

2

76

Tuy nhiên, bạn phải rất cẩn thận về cách sử dụng

2

77. Cuộc gọi lại này sẽ không bao giờ được kích hoạt nếu người dùng chọn đóng tab hoặc trình duyệt

7. Thuộc tính cho thuộc tính

Trong bất kỳ ứng dụng dựa trên HTML nào, việc các nhà phát triển sử dụng các thuộc tính phản ánh lại DOM là điều khá phổ biến. Ví dụ:

2

78 là một thuộc tính có thể được sử dụng để ẩn một phần tử, e. g.

2

79 sẽ chỉ ẩn phần tử khỏi DOM. Các nhà phát triển cũng muốn các thuộc tính này hoạt động trên các thẻ tùy chỉnh là điều tự nhiên.  

Vì chúng tôi mở rộng từ một

2

46, các thuộc tính này sẽ có mặt trong phần tử tùy chỉnh theo mặc định. Tuy nhiên, hành vi của các thuộc tính này có thể được sửa đổi. Hầu hết thời gian, getters và setters trong các lớp JavaScript được sử dụng để kiểm soát các thuộc tính.  

Document.createTextNode[“String”];

0

Document.createTextNode[“String”];

198

2

2

00

Document.createTextNode[“String”];

4

2

02

Document.createTextNode[“String”];

6

2

04

Document.createTextNode[“String”];

8

Document.createTextNode[“String”];

10

2

07

Document.createTextNode[“String”];

12

2

09

Document.createTextNode[“String”];

14

2

11

Document.createTextNode[“String”];

16

2

13

Document.createTextNode[“String”];

18

2

15

Document.createTextNode[“String”];

75

2

17

Document.createTextNode[“String”];

77

2

19

Document.createTextNode[“String”];

79

2

21

Document.createTextNode[“String”];

81

2

23

Document.createTextNode[“String”];

83

2

25

Document.createTextNode[“String”];

115

2

27

Document.createTextNode[“String”];

117

2

29

Document.createTextNode[“String”];

119

2

31

Document.createTextNode[“String”];

121

2

15

Document.createTextNode[“String”];

123

2

04

Thử nghiệm

Mọi thứ được thảo luận trong bài đăng này có thể được thử nghiệm trong bản demo sau

Xem Thẻ tùy chỉnh bút của DDev [@divyaddev] trên CodePen

Phần kết luận

hoan hô. Chúng tôi đã đi đến cuối bài đăng của mình về cách tạo các yếu tố tùy chỉnh. Bây giờ, bạn sẽ có thể tạo phần tử tùy chỉnh và sử dụng phần tử đó trong phần đánh dấu HTML của mình. thử cho nó một lần. Bạn sẽ ngạc nhiên khi thấy có thể đạt được bao nhiêu

Đây mới chỉ là khởi đầu về cách các yếu tố tùy chỉnh hoạt động. Còn rất nhiều điều để khám phá và học hỏi trong lĩnh vực này. Hãy tiếp tục theo dõi không gian này để biết thêm các bài đăng về các yếu tố tùy chỉnh và các khái niệm nâng cao của chúng

Làm cách nào để chèn thẻ HTML?

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