Thay thế nội dung văn bản JavaScript

Chỉnh sửa trong JSFiddle

2. Sử dụng jQuery

Với jQuery, bạn có thể sử dụng . html() để thay thế nội dung của bất kỳ phần tử nào sử dụng thuộc tính innerHTML của trình duyệt. Bạn cũng có thể sử dụng phương pháp .text().

jQuery

1

2

3

$(tài liệu). sẵn sàng(chức năng() {

    $("#container").html('Chào bạn. ');

});

HTML

1

Chỉnh sửa trong JSFiddle

3. Sử dụng nguyên mẫu. js

Nếu bạn đang sử dụng Nguyên mẫu. js, hãy cân nhắc sử dụng phương thức update()

Nguyên mẫu. js

1

$('vùng chứa'). cập nhật('Chào bạn. ');

HTML

1

Chỉnh sửa trong JSFiddle

Đó là tất cả về việc thay thế nội dung của phần tử div trong JavaScript và jQuery

Trong hướng dẫn này, bạn sẽ học cách thay thế nội dung trong javascript. Nội dung có thể ở dạng văn bản thuần túy hoặc HTML. Chẳng hạn, một div có thể có các phần tử khác là con của nó và một phần tử đoạn văn chỉ có thể có văn bản

Hầu hết các phần tử đều có thuộc tính innerText và innerHTML. Thuộc tính innerText phù hợp nhất trong trường hợp bạn muốn thay thế nội dung văn bản của một phần tử chẳng hạn như phần tử đoạn văn. Mặt khác, thuộc tính innerHTML phù hợp nhất khi bạn muốn thay thế nội dung HTML của một phần tử, chẳng hạn như phần tử div. Chúng ta sẽ thấy cả hai trong số họ trong hành động

Trong ví dụ sau, chúng ta có 2 nút, một nút để thay thế nội dung văn bản và một nút khác để thay thế nội dung HTML. Vui lòng xem qua ví dụ về mã và các bước được đưa ra bên dưới

Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách sử dụng JavaScript để thay thế nội dung của tài liệu HTML. Trong JavaScript, chúng ta có thể thay đổi nội dung của tài liệu HTML bằng cách kết hợp các phương thức sau –

• open − Phương thức open được sử dụng để mở một tài liệu mới có hai đối số là văn bản/html và thay thế, trong đó đối số đầu tiên sẽ xác định loại tài liệu mới sẽ được tạo và đối số sau sẽ thay thế tất cả lịch sử thêm trên trang trước

document.open("text/html", "replace");

• write - Sau khi tạo tài liệu mới bằng phương thức open(), bạn cần sử dụng phương thức write(), phương thức này lấy nội dung của tài liệu mới và bạn có thể chuyển nội dung của tài liệu mới được liên kết bên trong các thẻ HTML, như được hiển thị

document.write("content of new document");

• close − Phương thức close() được sử dụng để làm cho tài liệu mới hoạt động, như thể hiện trong cú pháp dưới đây −

document.close();

Hãy để chúng tôi hiểu việc triển khai thực tế của tất cả các phương pháp này cùng với sự trợ giúp của ví dụ về mã

thuật toán

• Bước 1 - Trong bước đầu tiên, chúng tôi sẽ xác định thẻ nút với sự kiện onclick trong tài liệu HTML, sau đó sẽ thay thế tài liệu bằng tài liệu mới sau khi được nhấp vào

• Bước 2 - Trong bước này, chúng tôi sẽ xác định chức năng gọi lại cho sự kiện onclick được gán cho nút được xác định trong bước trước

• Bước 3 - Trong bước cuối cùng, chúng ta sẽ viết logic bên trong hàm gọi lại bằng cách sử dụng các phương thức trên theo cú pháp được liên kết với từng phương thức để thay thế nội dung của tài liệu HTML

ví dụ 1

Ví dụ dưới đây sẽ thay thế nội dung của tài liệu HTML chỉ bằng một dòng được sử dụng bên trong thẻ đoạn văn -

   
Click and replace this content. 
   Replace
   

Trong ví dụ trên, chúng tôi chỉ sử dụng một dòng bên trong tài liệu ghi được liên kết với thẻ đoạn văn, thẻ này sẽ thay thế toàn bộ nội dung của tài liệu HTML trước đó bằng văn bản đó bên trong thẻ đoạn văn

Hãy để chúng tôi xem một ví dụ khác, nơi chúng tôi sẽ thay thế nội dung của tài liệu HTML hiện có bằng một số văn bản phức tạp

Thuật toán − Thuật toán của ví dụ này gần giống với thuật toán trước, bạn chỉ cần tổng hợp tất cả nội dung HTML mới bên trong một biến chuỗi mà bạn muốn thay thế nội dung của tài liệu hiện có.

ví dụ 2

Ví dụ dưới đây sẽ giải thích cho bạn cách bạn có thể thay thế nội dung của tài liệu hiện có bằng một số văn bản HTML phức tạp bằng ba phương pháp trên –

   
Click and replace this content.
   Replace
   

Trong ví dụ trên, chúng tôi đã sử dụng ba phương thức giống nhau để thay thế nội dung của tài liệu HTML, nhưng lần này chúng tôi đã lưu trữ nội dung HTML phức tạp của tài liệu HTML mới trong một biến chuỗi và sau đó chuyển nó tới phương thức write().

Trong hướng dẫn này, chúng ta đã thấy cách chúng ta có thể sử dụng các phương thức open(), write() và close() của JavaScript để thay đổi nội dung của tài liệu HTML hiện có bằng một số nội dung mới bằng cách triển khai thực tế và hiểu cách sử dụng chúng với

Làm cách nào để thay thế nội dung HTML trong JavaScript?

Cái gì được sử dụng để thay thế nội dung phần tử trong JavaScript?