Làm cách nào để viết HTML trong chuỗi JavaScript?
Hôm qua, tôi đã viết về Reef, giải pháp thay thế nhẹ nhàng của tôi cho Vue và React. Trong vài ngày tới, tôi muốn xem các bộ phận khác nhau của nó hoạt động như thế nào Show
Hôm nay, chúng ta sẽ xem xét cách lấy một chuỗi HTML và chuyển đổi nó thành đánh dấu thực tế Tại sao bạn cần điều nàyNếu bạn muốn chèn một chuỗi vào DOM, bạn có thể làm điều đó khá đơn giản với 0
Nhưng Reef không chỉ đẩy đánh dấu vào một yếu tố. Nó so sánh đánh dấu hiện có trong một phần tử với giao diện của nó và chỉ cập nhật những thứ cần thay đổi Ví dụ: nếu nội dung hiện có bên trong 0 là
Reef sẽ chỉ cập nhật văn bản bên trong 1 thay vì tạo một phần tử hoàn toàn mớiĐể điều đó hoạt động, chúng tôi cần chuyển đổi các chuỗi HTML thành các phần tử HTML thực tế có thể được duyệt qua, ánh xạ và phân tích Tạo một phương thức trợ giúpTrước tiên, hãy tạo một hàm trợ giúp sẽ chấp nhận một chuỗi và trả về HTML
cách tiếp cận đơn giảnCách đơn giản nhất để làm điều này là tạo một phần tử, chèn chuỗi vào với 0, sau đó trả về phần tử
Cách tiếp cận này không hoàn hảo, mặc dù Mặc dù phần tử này bị tách rời—nghĩa là không thực sự nằm trong DOM hiện tại—trình duyệt vẫn sẽ thực hiện những việc như tải xuống các tệp hình ảnh Thao tác này sẽ kích hoạt tệp hình ảnh để tải xuống, mặc dù phần đánh dấu chưa được hiển thị ở bất kỳ đâu
Một cách tốt hơnSau khi thực hiện một loạt nghiên cứu, tôi đã phát hiện ra một phương pháp trình duyệt riêng để tránh vấn đề này. 3. Đối tượng 3 tạo một tài liệu DOM mới từ một chuỗiĐể sử dụng nó, bạn khởi tạo một thể hiện mới. Sau đó, bạn sử dụng phương thức 5 để chuyển đổi chuỗi của mình thành phần tử 6 mới. Phương thức chấp nhận chuỗi làm đối số đầu tiên. Đặt đối số thứ hai thành 7Bởi vì nó thực sự là một phần tử 6 mới, chúng tôi sẽ trả về 9 4Bây giờ chúng tôi có thể làm điều này và sẽ không có tải xuống nào được kích hoạt
Kết hợp hai cách tiếp cậnPhương pháp 3 thật tuyệt vời, nhưng phương pháp 5 dừng lại ở IE10Tôi muốn kết hợp hai cách tiếp cận, sử dụng 3 khi nó được hỗ trợ và quay lại tạo một phần tử và sử dụng 0 khi nó không được hỗ trợĐể kiểm tra hỗ trợ, chúng tôi sẽ gán IIFE cho biến 4Bên trong IIFE, trước tiên chúng tôi sẽ kiểm tra xem 5 có tồn tại trong 6 không. Nếu không, chúng tôi sẽ trả lại 7. Tiếp theo, chúng tôi sẽ cố gắng sử dụng 5 để tạo một 6. Nếu thất bại, chúng tôi sẽ trả lại 7. Nếu không, chúng tôi sẽ trả lại 1 7Bên trong phương pháp 2 của chúng tôi, chúng tôi sẽ sử dụng có điều kiện 3 khi nó được hỗ trợ và 0 khi nó không được hỗ trợ
Làm cách nào để đặt mã HTML vào chuỗi JavaScript?Các phương thức append() & prepend() có thể được sử dụng để chèn chuỗi HTML bên trong một phần tử đã cho . Cả hai phương pháp phân tích chuỗi HTML đã cho dưới dạng văn bản và tạo nút Văn bản.
Chúng ta có thể viết mã HTML bằng JavaScript không?Thẻ HTML
. Để chọn một phần tử HTML, JavaScript thường sử dụng tài liệu. phương thức getElementById().
Làm cách nào để hiển thị văn bản HTML trong JavaScript?Có bốn cách để hiển thị văn bản trong trình duyệt bằng JavaScript. . Using the document. write() method to write inside the tag.. Sử dụng tài liệu. phương thức querySelector() để thay thế nội dung của một phần tử cụ thể Sử dụng bảng điều khiển. . Sử dụng phương thức alert() để ghi đầu ra văn bản vào hộp bật lên Làm thế nào để viết một chuỗi HTML?Bạn có thể tạo một thể hiện Chuỗi bằng cách sử dụng văn bản thuần túy hoặc HTML, chẳng hạn cả hai câu lệnh này đều hợp lệ. // Từ văn bản thuần túy var helloWorld = new HTMLString. String('Hello World'); // Từ HTML var helloWorldBold = new HTMLString. |