jQuery có sẵn nhiều phương pháp để giúp các nhà phát triển tạo trải nghiệm web động một cách hiệu quả. JQuery html() phương thức thay thế tất cả HTML bên trong phần tử đã chọn. Điều này rất hữu ích nếu bạn muốn thay đổi động những gì người dùng nhìn thấy sau khi tương tác với trang.
Trong hướng dẫn này, chúng ta sẽ tìm hiểu về cách sử dụng html() và cú pháp của nó. Chúng tôi cũng sẽ xem xét cách tiếp cận từng bước để sử dụng html() . jQuery html() là một phương thức cơ bản trong thư viện jQuery và thường được sử dụng. Sau khi học những kiến thức cơ bản, bạn sẽ sẵn sàng bắt đầu thực hành sử dụng html() .
jQuery html () là gì?
jQuery html() đặt nội dung HTML của mỗi phần tử trong một tập hợp các phần tử phù hợp. Cần thận trọng khi cung cấp một truy vấn đủ cụ thể để chỉ thay thế HTML mong muốn.
Chỉ nội dung được thay đổi bằng html() . Nếu có một biểu định kiểu, nội dung mới sẽ được tạo kiểu giống như nội dung trước đó. Cũng cần nhắc lại rằng html() chỉ hoạt động trên tài liệu HTML - nó không hoạt động với XML.
Cú pháp html () jQuery
Nhớ lại rằng các phương thức jQuery được gọi trước tiên trên một bộ chọn. Bộ chọn có thể rộng như thẻ
hoặc cụ thể như
html() và chuyển vào một chuỗi HTML dưới dạng tham số cho html() . Để được giải thích cặn kẽ về các bộ chọn CSS, hãy tham khảo hướng dẫn của chúng tôi.
html() chấp nhận một chuỗi ký tự dưới dạng tham số hoặc một biến chứa chuỗi. Việc chuyển một chuỗi theo nghĩa đen của “Nội dung mới” sẽ hiển thị giống như việc chuyển một biến tham chiếu đến “Nội dung mới”.
Giả sử chúng ta có
<div class='main-content> <p class='paragraphOne'> Hello World </p> </div>
Chúng tôi có thể thay thế toàn bộ thẻ
:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
$('div.main-content').html('<p>New Content</p>')
Đoạn mã trên hiển thị HTML mới như sau:
<div class='main-content> <p>New Content </p> </div>
Nếu đã có kiểu được liên kết với thẻ
ban đầu, nó sẽ không còn hoạt động với nội dung mới. Cũng có thể truyền một chuỗi đơn giản:
$('div.main-content').html('New Content')
HTML của chúng tôi bây giờ như sau:
<div class='main-content> New Content </div>
Chúng ta có thể thấy rằng có một số khác biệt trong nội dung mới. Chuyển một ký tự chuỗi là một cách tuyệt vời để duy trì kiểu dáng của nội dung trước đó. Hãy nhớ rằng, một chuỗi ký tự chỉ đơn giản là một chuỗi có chứa các ký tự. Nếu nội dung mới cần phải là một phần tử con, thì việc sử dụng một chuỗi HTML sẽ thực hiện được điều này.
Bây giờ, cú pháp cơ bản đã được đề cập, chúng ta hãy xem một ví dụ.
html () jQuery Ví dụ
Chúng tôi đã thấy cách html() thay thế nội dung bên trong phần tử đã chọn trong ví dụ “Nội dung mới” ở trên của chúng tôi. Điều này có thể được thực hiện bằng cách chuyển một chuỗi ký tự hoặc một chuỗi HTML làm tham số. Hãy xem một ví dụ mà chúng tôi duy trì kiểu dáng ban đầu.
<head>
<style>
.blue {
color: blue;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<h2>
html() Demo:
</h2>
<div class='main'>
<p class='blue'>
Hello
</p>
<p>
World
</p>
<p>
Goodbye
</p>
</div>
<script>
</script>
</body> Nhìn vào trang HTML ban đầu, chúng ta sẽ chỉ thấy từ “Xin chào” được tạo kiểu với màu xanh lam.
Trong ví dụ này, chúng tôi muốn thay thế từ “Xin chào” bằng nội dung mới nhưng vẫn giữ nguyên kiểu dáng ban đầu. Để thực hiện điều này, chúng tôi chọn đoạn văn có tên lớp màu xanh lam.
$('p.blue').html("Hello AGAIN")
Chúng tôi đã chọn đoạn văn thuộc lớp màu xanh lam và thay thế "Xin chào" bằng "Xin chào LẠI." Kể từ khi html() thay thế nội dung được bao bọc trong tên phần tử, màu xanh lam sẽ vẫn còn.
Điều gì sẽ xảy ra nếu chúng ta muốn thay thế tất cả các đoạn văn bản? Nếu chúng tôi chọn phần tử
, phần tử này sẽ thay thế văn bản trên bằng ba trường hợp “Xin chào LẠI”.
$('p').html("Hello AGAIN")
Ở đây chúng tôi đang chọn tất cả các thẻ đoạn trong tệp HTML và thay thế nội dung của từng thẻ bằng “Hello AGAIN”. Giống như ví dụ đầu tiên của chúng tôi, kiểu ban đầu sẽ hiển thị vì chúng tôi đang thay thế nội dung được bao bọc trong các thẻ đó.
Đúng như chúng tôi mong đợi. Hãy tăng một cấp trong bộ chọn của chúng ta đến
$('div.main').html('<p class=blue>Main Div Content</p>') 
Bên trong div chính của chúng ta, chúng ta có ba phần tử đoạn. Biết cách làm html() hoạt động, chúng ta có thể suy ra đoạn mã trên sẽ thay thế ba thẻ
bằng một thẻ được truyền dưới dạng tham số. Đọc hướng dẫn của chúng tôi về cách học HTML để hiểu sâu hơn về khái niệm trên
Trong một dòng mã, chúng tôi đã thay thế ba phần tử đoạn khác nhau và sử dụng kiểu lớp ban đầu của chúng tôi.
Kết luận
jQuery html() là một phương pháp thường được sử dụng để thay thế nội dung trên các trang HTML nhằm tạo ra trải nghiệm động. Bởi vì html() thay thế nội dung được bao bọc bên trong các phần tử HTML, điều quan trọng là phải chú ý đến các bộ chọn jQuery và bất kỳ lớp kiểu nào. Điều này sẽ ngăn chặn mọi thay đổi kiểu không mong muốn.
Chúng ta đã tìm hiểu jQuery là gì, cú pháp của nó và một ví dụ về cách sử dụng nó. Hãy dành thời gian thực hành và làm quen với phương pháp được sử dụng rộng rãi này.