Điều quan trọng là phải biết Cách tạo Element trong JavaScript, tại sao? . Điều này có nghĩa là chúng ta cần biết cách tạo các phần tử, cách sửa đổi các phần tử. Trong bài viết này, chúng tôi hướng dẫn cách thêm các phần tử mới trên màn hình. Nhưng tại CodeBrainer, chúng tôi cũng chỉ ra các kỹ thuật về cách thực hiện sửa đổi
chúng tôi sẽ xem xét
- DOM là gì?
- phương thức tạo phần tử
- Các phương thức DOM khác chúng ta cần đề cập
- createElement trong các ví dụ JavaScript
- Chúng tôi cần một HTML để tạo các phần tử mới trong
- Thêm phần tử đầu tiên
- Tạo một phần tử bên trong một phần tử đã chọn
- Làm cách nào để bạn tạo các phần tử có thuộc tính?
- InternalText so với InternalHTML
- Thêm một lớp kiểu CSS vào một phần tử bằng JavaScript
- Làm cách nào chúng ta có thể chèn một phần tử trước một phần tử hiện có
- Tạo các phần tử lồng nhau bằng JavaScript - Thêm danh sách bằng JavaScript
- Vui vẻ và thêm 100 nút
DOM là gì?
DOM hoặc Mô hình đối tượng tài liệu là một cách giao tiếp với các phần tử HTML trong một trang web. DOM cung cấp chức năng tìm kiếm, sửa đổi, loại bỏ các thành phần trong tài liệu HTML. Chúng tôi cũng có khả năng tìm kiếm các phần tử và đếm chúng. Các phần tử được biểu diễn dưới dạng cây các nút
DOM là một giao diện được trình duyệt cung cấp cho chúng tôi và không phải là một phần của ngôn ngữ JavaScript. Nhưng thật là một dịch vụ tuyệt vời nó cung cấp. Chúng tôi thậm chí không thể tưởng tượng được các trang web hiện đại mà không sử dụng DOM
phương thức tạo phần tử
phương thức createElement tạo một phần tử HTML mới trong DOM. Khi gọi phương thức, bạn phải cung cấp tên thẻ xác định loại phần tử chúng tôi tạo
var element = document.createElement[tagName[, options]];
tagName có thể là bất kỳ thẻ HTML nào mà bạn biết, như p, div, span,. [đọc thêm về các thẻ HTML].
Tham số options là tùy chọn, nó cho phép chúng ta đặt thuộc tính is khi thêm một phần tử. thuộc tính is cho phép chúng ta thay đổi hành vi của HTMLElement và điều đó có nghĩa là chúng ta sẽ phải viết một lớp tùy chỉnh cho nó. Đây là một chủ đề nâng cao hơn, mà chúng tôi không đề cập trong bài viết này.
Nó trông như thế nào để tạo một đoạn văn?
document.createElement["p"]
Đây là nó, nhưng bạn cần thêm vài bước nữa để nó hoạt động, hãy xem ví dụ bên dưới để biết giải thích chi tiết
Bắt đầu khóa học do người cố vấn của chúng tôi hướng dẫn, nơi người cố vấn của chúng tôi dẫn dắt bạn trên mọi bước đường. Yêu cầu bản dùng thử MIỄN PHÍ của bạn ngay hôm nay
dùng thử miễn phíCác phương thức DOM khác chúng ta cần đề cập
appendChild là một phương thức của Nút, nó nối một phần tử với một phần tử đã cho. Đây là một phương pháp cần thiết để thực sự thêm các phần tử vào tài liệu HTML. Chúng tôi gọi nó sau phương thức createElement và hoàn tất việc tạo phần tử. Chúng ta có thể thêm phần tử mới
insertBefore là một phương thức tương tự như appendChild nhưng nó chèn một phần tử trước phần tử đã cho, điều này cho phép chúng ta định vị phần tử trong cấu trúc tài liệu. Chúng ta cũng có thể sử dụng phương thức insertBefore để thêm các phần tử vào tài liệu.
removeChild là một phương pháp phá hoại hơn một chút vì nó trả về một phần tử từ tài liệu, nhưng điều cần thiết là cho phép chúng tôi xây dựng các trang web động, hãy tưởng tượng rằng bạn thêm một mặt hàng vào giỏ hàng trong một cửa hàng trực tuyến và sau đó đổi ý, xóaTrẻ em
createElement trong JavaScript - ví dụ
Chúng tôi cố gắng giải thích tất cả mã bằng các ví dụ đầy màu sắc. Lần này chúng tôi đã chuẩn bị khá nhiều ví dụ để bạn giải thích rõ hơn về chức năng của createElement trong JavaScript. Chúng tôi cung cấp trước cho bạn tài liệu HTML cần thiết, nhưng bạn phải tự xây dựng mã JavaScript, từng bước một để tìm hiểu thêm
Chúng tôi cần một HTML để tạo các phần tử mới trong
Một tài liệu HTML phục vụ hai mục đích, thứ nhất là hiển thị tất cả các nút chúng ta cần để thực hiện tất cả các ví dụ, thứ hai là trình giữ chỗ để thêm các phần tử mới.
HTML được cấu trúc theo cách nó có một bảng điều khiển với các nút và bộ đếm ở trên cùng và một trình giữ chỗ cho các thành phần bên dưới, nó trông giống như thế này
Bạn có thể thấy rằng chúng tôi thậm chí đã thêm một bộ đếm, bằng cách này, bạn luôn thấy vị trí của các phần tử mới
HTML liên kết tất cả các thành phần với nhau
Giải thích cách tạo phần tử trong JavaScripts sẽ có 2 phần, một phần là tài liệu HTML và phần còn lại là tệp JavaScript có mã. Chúng ta cần kết nối cả hai
Sao chép vào clipboardHãy nhớ rằng bạn cần đặt createElement.js vào thư mục js. Hoặc điều chỉnh các giá trị để nó hoạt động
Phong cách để làm cho các yếu tố mới khác nhau
Chúng tôi không cần nhiều kiểu cho ví dụ này, đó là lý do tại sao chúng tôi đặt chúng trong thẻ đầu
Sao chép vào clipboardCSS đầu tiên được xác định cho thành phần có id tagName0 [chúng tôi xác định điều này bằng dấu # phía trước id] và nó làm cho phông chữ trong div này có màu đỏ. Bằng cách này, rõ ràng nơi một phần tử mới được tạo. Nếu nó có màu đỏ, nó được tạo ra bên trong tagName0
Tiếp theo là lớp CSS tagName2, tất cả những gì lớp này làm là làm cho phông chữ có màu xanh lam, một lần nữa để làm rõ rằng chúng tôi đã thêm một kiểu bằng cách sử dụng createElement trong JavaScript, tiếp theo là thêm một lớp CSS vào thành phần mới
Lớp cuối cùng có tên là tagName3, nó được sử dụng cho bảng điều khiển các nút của chúng tôi ở đầu tài liệu, chỉ để tạo khoảng cách và thêm đường viền, để tách các phần tử đã tạo khỏi các phần tử hiện có khỏi tài liệu HTML
Thêm tất cả các nút
Có rất nhiều nút cho ví dụ này, tất cả những gì bạn cần biết là các nút chỉ ở đó để thực thi các chức năng được viết bằng mã JavaScript. Tên của các chức năng rất dễ hiểu và chúng tôi cũng giải thích từng chức năng từng bước bên dưới
Sao chép vào clipboardỞ cuối có một div cho bộ đếm
Điều quan trọng là chúng ta thêm id vào thẻ span, theo cách này, chúng ta có thể tìm thấy nó trong JavaScript bằng một phương thức rất hữu ích khác từ DOM có tên là tagName4
div để đặt các phần tử vào
Hầu hết các phần tử chúng tôi đặt trực tiếp vào phần tử nội dung, nhưng để giới thiệu cách chúng tôi có thể cấu trúc tài liệu, chúng tôi đặt một số phần tử trực tiếp vào phần đặc biệtDiv. Đó là lý do tại sao chúng ta cần một mã HTML cho nó
Sao chép vào clipboardVới phần này, chúng tôi kết thúc phần giải thích về tài liệu HTML mà chúng tôi sử dụng để tạoElement trong JavaScript
HTML cuối cùng
Ở đây bạn có thể thấy mã hoàn chỉnh
Sao chép vào clipboardThêm phần tử đầu tiên
Chúng tôi gọi hàm đầu tiên của mình là addFirstElement một cách thông minh vì chúng tôi đang thêm phần tử đầu tiên của mình
Sao chép vào clipboardHàm này làm gì, nó tạo một phần tử và lưu trữ nó trong một biến có tên là tagName5. Chúng ta cần biến này để làm việc với phần tử hơn nữa.
Tiếp theo, chúng tôi đặt văn bản cho phần tử bằng thuộc tính tagName6. Có một sự thay đổi trong việc đặt văn bản thành phần tử. Chúng tôi nối một chuỗi được trả về bởi hàm tagName7
tagName7 là một hàm trả về số lượng phần tử hiện tại trên trang và tăng thêm một cho mỗi phần tử. Sử dụng bộ đếm, chúng ta có thể thấy vị trí các phần tử được thêm vào trang. Hàm tagName7 được giải thích bên dưới
Điều cuối cùng là thêm một phần tử vào cây nút của phần thân. Chúng tôi làm điều này bằng cách sử dụng phương thức appendChild của đối tượng options1
Tạo một phần tử bên trong một phần tử đã chọn
Làm cách nào để chúng tôi tạo một phần tử bằng JavaScript bên trong phần tử đã chọn?
Sao chép vào clipboardBạn có thể thấy rằng chúng tôi cũng sử dụng hàm tagName7 ở đây để chỉ ra thứ tự các phần tử được thêm vào tài liệu
Vì chúng tôi đang thêm một phần tử vào specialDiv, chúng tôi gọi phương thức appendChild trên phần tử được lưu trữ trong biến tagName0
Làm cách nào để bạn tạo các phần tử có thuộc tính?
Chúng tôi không thể thêm thuộc tính trực tiếp với createElement trong JavaScript. Để làm được điều đó chúng ta cần thêm một vài bước nữa. Điều này được minh họa rõ nhất bằng cách sử dụng ví dụ thêm liên kết, có liên kết và mở trong cửa sổ mới
Sao chép vào clipboardĐiều tuyệt vời khi thao tác với các phần tử bằng JavaScript là chúng ta đang tương tác với một tham chiếu cho phần tử đó và chúng ta có thể thay đổi bất kỳ thứ gì
Trong trường hợp này, chúng ta có thể sử dụng phương thức options6 để thêm thuộc tính options7. Giá trị là một URL trỏ đến vị trí chúng ta cần hiển thị
Tương tự với thuộc tính options8 hướng dẫn liên kết mở trong tab/cửa sổ mới khi người dùng sử dụng nó. Chỉ cần nhớ sử dụng giá trị options9 để thực hiện hành vi này
Hãy nhớ thêm một phần tử bằng cách sử dụng appendChild ở cuối
InternalText so với InternalHTML
Chúng tôi đang sử dụng các hàm InternalText và InternalHTML rất nhiều khi thao tác với các tài liệu HTML bằng JavaScript. Sự khác biệt giữa hai phương pháp này được thể hiện rõ nhất trên một ví dụ
Sao chép vào clipboardToàn bộ sự khác biệt trong việc tạo hai phần tử document.createElement["p"]1 và document.createElement["p"]2 là chúng ta sử dụng InternalText cho phần tử đầu tiên và InternalHTML cho phần tử thứ hai
Mã này hơi giống nhau, nhưng những gì hiển thị trên màn hình thì rất khác
Như bạn có thể thấy trong hình trên, sử dụng tagName6, chúng tôi nhận được một văn bản mà không cần tạo kiểu và phân tích cú pháp mã HTML. Khi sử dụng document.createElement["p"]4, giá trị đã cho được diễn giải và hiển thị dưới dạng HTML, điều này cho phép chúng tôi thêm kiểu dáng và thậm chí các phần tử lồng nhau bằng mã HTML
Bắt đầu khóa học do người cố vấn của chúng tôi hướng dẫn, nơi người cố vấn của chúng tôi dẫn dắt bạn trên mọi bước đường. Yêu cầu bản dùng thử MIỄN PHÍ của bạn ngay hôm nay
dùng thử miễn phíThêm một lớp kiểu CSS vào một phần tử bằng JavaScript
Vậy làm cách nào để thêm một lớp CSS vào một phần tử mới được tạo?
Sao chép vào clipboardCó một thuộc tính gọi là document.createElement["p"]5 trả về danh sách các lớp CSS được sử dụng để tạo kiểu cho một phần tử HTML đã cho [đọc thêm về CSS]. Danh sách này cũng có một phương thức gọi là document.createElement["p"]6, chúng tôi sử dụng phương thức này để thêm một lớp khác vào danh sách. Trong trường hợp của chúng tôi, chúng tôi làm cho phông chữ có màu xanh lam bằng cách sử dụng lớp tagName2. Chúng tôi đã chuẩn bị lớp CSS trước đó trong thẻ kiểu HTML nhìn thấy ở trên
Đặt kiểu tùy chỉnh cho một phần tử bằng JavaScript
Chúng tôi cũng có thể đặt kiểu tùy chỉnh, sử dụng JavaScript và tạo các yếu tố kiểu cách khi đang di chuyển. Nguyên tắc này cũng có thể được sử dụng cho các phần tử hiện có khi chúng ta muốn thao tác với các phần tử trên màn hình
Sao chép vào clipboardKiểu là một thuộc tính được sử dụng để lấy cái gọi là kiểu nội tuyến cho các phần tử, nó có thể được sử dụng để tạo kiểu tùy chỉnh mà không cần sử dụng các lớp CSS. Sự phát triển hiện đại khuyên chúng ta nên sử dụng các lớp CSS bất cứ khi nào có thể, nhưng điều quan trọng là phải biết cách thay đổi kiểu cho một phần tử.
Sao chép vào clipboardSử dụng kiểu bạn có quyền truy cập vào các thuộc tính CSS, bạn có thể thấy rằng chúng tôi đã thay đổi màu của phông chữ thành màu xanh lá cây.
Chúng tôi cũng đã thêm thuộc tính CSS document.createElement["p"]8 để giới thiệu cách tên thay đổi nếu bạn muốn sử dụng nó trong JavaScript và trong trường hợp này, tên thuộc tính là document.createElement["p"]9 [dấu gạch ngang trong tên lớp CSS ngụ ý chữ hoa cho mỗi từ].
Như trước đây, đừng quên sử dụng appendChild để thực sự thêm một phần tử mới vào trang
Làm cách nào chúng ta có thể chèn một phần tử trước một phần tử hiện có
Chúng tôi có một phương thức insertBefore cho phép chúng tôi chèn một phần tử mới vào trước phần tử hiện có.
Điều quan trọng nhất thay đổi là chúng ta cũng cần một tham chiếu đến một phần tử, nơi chúng ta muốn chèn một phần tử mới, trong trường hợp của chúng ta, đây là tagName0, một lần nữa, tagName0 lại có ích
Cuối cùng, mã thay đổi để chúng tôi sử dụng phương thức insertBefore. Chúng ta cũng cần chỉ định phần tử để chèn trước, tagName0
Tạo các phần tử lồng nhau bằng JavaScript - Thêm danh sách bằng JavaScript
Bây giờ chúng tôi biết rằng chúng tôi có thể sử dụng createElement trong JavaScript để thêm một phần tử. Nhưng làm thế nào về các phần tử lồng nhau hoặc giả sử một danh sách, với
- như một thẻ chính và nhiều
- thẻ bên dưới
- .
Chúng tôi muốn gọi một danh sách không có thứ tự theo cách chúng nhìn với các dấu đầu dòng ở phía trước mỗi mục danh sách. Biết được điều này, bây giờ chúng ta viết một hàm có tên là
appendChild5 sẽ giới thiệu cách tạo một danh sáchTrong hầu hết các trường hợp, chúng tôi sẽ sử dụng một số loại vòng lặp để lặp lại tất cả các mục danh sách [kiểm tra các vòng lặp bài đăng trên blog của chúng tôi bằng JavaScript], nhưng chúng tôi chỉ cần hiển thị thay đổi khi thêm một mục danh sách vào màn hình
Trước tiên, chúng tôi tạo một phần tử cho ul và lưu trữ nó trong một biến có tên là newUl, bằng cách này, chúng tôi có một cách để thêm các phần tử mới vào danh sách của mình. Mã để thêm một mục danh sách vào danh sách hơi giống với việc thêm phần thân, tất cả những thay đổi đó, mà chúng ta gọi là phương thức appendChild trên biến newUl
Sao chép vào clipboardGọi appendChild trên
appendChild6 hướng dẫn DOM đặt mục danh sách trong danh sáchMột lần nữa, chúng ta không được quên nối danh sách vào chính phần thân
Vui vẻ, thêm 100 nút
Chúng tôi đã tiết kiệm tốt nhất cho cuối cùng. Bây giờ chúng ta sẽ thêm chức năng tạo 100 nút. Vâng, một trăm nút. Trên hết, tất cả các nút đều có khả năng tự loại bỏ khỏi màn hình. Điều này làm cho việc nhấp vào mọi nút và thấy chúng biến mất trở nên thú vị. Chúng tôi biết bạn đã học một vài cách để tạo các phần tử trong JavaScript, bây giờ chúng tôi sử dụng kiến thức này trong chức năng này. Hãy gọi nó là
Sao chép vào clipboardappendChild7Chúng ta bắt đầu hàm với vòng lặp for lặp từ 1 đến 100 và lưu giá trị đó vào biến i
Sao chép vào clipboardChúng tôi gán một
appendChild8 cho mọi nút theo cách này, chúng tôi có thể tìm thấy nó sau này trong chức năng xóa nút khỏi trang web. Id là một chuỗi có tiền tố "nút" và bộ đếm cho mỗi nút trong số 100Chúng tôi giải thích cách kết nối sự kiện title bên dưới
Lần này, chúng tôi sẽ thay đổi màu nền của các nút bằng cách sử dụng các kiểu tùy chỉnh [đã giải thích ở trên], để làm cho chúng khác với các nút của chúng tôi trong bảng điều khiển chẳng hạn. Cuối cùng, chúng tôi gọi appendChild để thêm một nút vào DOM. Để thú vị hơn, hãy tìm hiểu cách tạo biểu mẫu liên hệ trong JavaScript
Làm cách nào để chúng tôi kết nối sự kiện title và các phần tử mới được tạo
Chúng tôi có thể chỉ ra cách thêm một sự kiện
Sao chép vào clipboardappendChild9 bằng một hàm trong một ví dụ đơn giản, gọi hàm xóa cho một nút nhất địnhChúng tôi xác định chức năng hoặc sự kiện theo cách khác như trong HTML, nơi chúng tôi viết một chức năng trong một chuỗi cho thuộc tính title. Trong JavaScript thay vì một chuỗi, hàm này là một hàm thực, đó là mã JavaScript thực. Nó có vẻ phức tạp hơn một chút nhưng nó mở ra một danh sách các khả năng hoàn toàn mới cho chúng ta. Hiện tại, chúng tôi chỉ thêm một hàm đơn giản gọi hàm
createElement0. Đối với tham số, chúng tôi cung cấp giá trị củacreateElement1, đó là giá trị cho nút hiện tại trong vòng lặp.Làm cách nào chúng tôi có thể xóa phần tử khỏi trang web bằng JavaScript
Chúng tôi sử dụng hàm
Sao chép vào clipboardcreateElement0 để xóa nút khỏi trang web, nhưng nó hoạt động như thế nào? . Sau đó, chúng tôi gọi phương thứcremoveChildtrên phần thân bằng cách sử dụng tham chiếu nút [biến]Cuối cùng, chúng tôi giảm giá trị bộ đếm và cập nhật nó bằng hàm updateCounter, cập nhật giá trị trên trang web. Phần này chỉ dành cho bộ đếm và không tháo nút
Chức năng cho bộ đếm
Trong toàn bộ bài viết, chúng tôi sử dụng một hàm có tên là
Sao chép vào clipboardtagName7, hàm này tăng bộ đếm lên một và trả về một chuỗi để bộ đếm nối vào văn bản của các phần tử của chúng tôiChức năng này là một chức năng đơn giản. Một lời giải thích có thể là
createElement6 trong JavaScript tương đương vớicreateElement7Hàm getCounter cũng sử dụng hàm updateCounter, hàm này tìm phần tử counter trong DOM và cập nhật giá trị cho chúng ta. Bằng cách này, chúng tôi cũng có thể cập nhật bộ đếm khi xóa nút
Sao chép vào clipboardPhần kết luận
Phương thức createElement trong JavaScript mang lại cho chúng ta rất nhiều tính linh hoạt và khi bạn nắm vững tất cả các cách có thể thêm một phần tử vào trang web, bạn sẽ có tất cả kiến thức cần thiết để thao tác trang web theo bất kỳ cách nào bạn muốn
Sử dụng kiến thức này, bạn có thể tạo một giỏ động cho cửa hàng trực tuyến của mình, bạn có thể thêm các phép tính động vào trang web giới thiệu sản phẩm của mình, thêm tương tác cho người dùng theo bất kỳ cách nào bạn có thể nghĩ ra
Chúng tôi đã đưa ra khá nhiều ví dụ, hãy cho chúng tôi biết suy nghĩ của bạn, chúng tôi có thể giúp bạn nhiều hơn như thế nào. Và hãy nhớ vui vẻ viết mã với CodeBrainer
Làm cách nào để thêm HTML động trong JavaScript?
Có tài liệu. phương thức createElement[] bạn có thể tự động tạo một phần tử HTML được chỉ định trong JavaScript. Sau khi tạo, bạn có thể thêm thuộc tính. Nếu bạn muốn phần tử hiển thị trong tài liệu của mình, bạn phải chèn vào cây DOM của tài liệu.Làm cách nào để thêm phần tử HTML bằng JavaScript?
4 cách để thêm phần tử HTML bằng JavaScript .tài liệu. tạo phần tửThẻ HTML mẫuNgôn ngữ tạo khuôn mẫu EJSEJS + tìm nạpLàm thế nào để viết HTML động?
Hãy để chúng tôi lấy một số ví dụ để biết cách tạo trang HTML động bằng HTML và CSS. .ví dụ 1. Lấy tên người dùng làm đầu vào và tự động thay đổi nội dung văn bản của trang webđầu raví dụ 2. Tự động thay đổi màu nền của trang web trên mỗi lần nhấpđầu raLàm cách nào để làm cho JavaScript động?
Các phần tử mới có thể được tạo động trong JavaScript với sự trợ giúp của phương thức createElement[] . Các thuộc tính của phần tử đã tạo có thể được đặt bằng phương thức setAttribute[].