Bài 06: jQuery Attributes - html()

DEMO

Hàm html() jquery dùng để lấy nội dung HTML bên trong một thẻ nào đó. Nếu selector bạn truyền vào trả về là một danh sách thì nó sẽ lấy nội dung HTML của phần tử đầu tiên.

1. Cú pháp hàm html() jquery

Hàm html() jquery có hai cách dùng như sau:

  • Dùng lấy nội dung (get): $('selector').html()
  • Dùng thiết lập nội dung (set): $('selector').html('noi dung ben trong') 

2. Cách sử dụng hàm html() jquery

Sử dụng html() lấy nội dung (get):

Ví dụ: Lấy nội dung của thẻ div#content và alert() lên màn hình.

Xem demo:

<!DOCTYPE html>
<html>
    <head>
        <title>Đổi màu nhé</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
        <script language="javascript">  
        $(document).ready(function(){

            $('#button').click(function(){
                var content = $('#content').html();
                alert(content);
            });
        });
        </script>
    </head>
    <body>
        <div id="content">
            <h1>Nội dung nè</h1>
        </div>
        <input type="button" value="Lấy nội dung bên trong" id="button"/>
    </body>
</html>

Sử dụng html() để thiết lập nội dung (set):

Vi dụ: Khai báo một biến chứa một đoạn mã html và gán vào thẻ div#content

Xem demo:

<!DOCTYPE html>
<html>
    <head>
        <title>Đổi màu nhé</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
        <script language="javascript">  
        $(document).ready(function(){

            $('#button').click(function(){
                var content = '<h1>Nội dung nè</h1>';
                $('#content').html(content);
            });
        });
        </script>
    </head>
    <body>
        <div id="content">
        </div>
        <input type="button" value="Thiết lập nội dung" id="button"/>
    </body>
</html>

3. Ví dụ tổng hơp hàm html() jquery

Cho hai thẻ div#content1div#content2. Xây dựng chương trình hoán đổi nội dung bên trong hai thẻ div này.

Xem demo:

<!DOCTYPE html>
<html>
    <head>
        <title>Đổi màu nhé</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script language="javascript" src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
        <style>
            #content1{
                height: 200px; background:red
            }
            #content2{
                height: 200px; background:yellow
            }
        </style>
        <script language="javascript">  
        $(document).ready(function()
        {
            $('#button').click(function(){
                
                // Lấy nội dung
                var content1 = $('#content1').html();
                var content2 = $('#content2').html();

                // Thực hiện đổi nội dung
                $('#content1').html(content2);
                $('#content2').html(content1);
                
            });
        });
        </script>
    </head>
    <body>
        <div id="content1">
            <h1>Chào mừng các bạn</h1>
        </div>
        <div id="content2">
            <h1>Đến với <a href="https://freetuts.net">freetuts.net</a></h1>
        </div>
        <input type="button" value="Hoán đổi nội dung" id="button"/>
    </body>
</html>

4. Lời kết

Bài này thật sự căn bản nhưng mình rất thích mấy cái ví dụ, nó rất thực tế và dễ hiểu cho những bạn mới học jquery. Hy vọng qua bài này bạn nắm được cách sử dụng hàm html() trong jquery và kết hợp vỡi những hàm khác để xử lý giao diện nhé.

Tài liệu chỉ mang tính chất tham khảo, mình không cam kết các nội dung trên website, vì vậy không được sử dụng để in ấn hay kinh doanh.
Hãy để lại link bài viết gốc khi chia sẻ bài viết này, mình sẽ report DMCA với những website vi phạm nội dung bản quyền mà mình đã đưa ra.

Nguồn: freetuts.net

Profile photo of adminTheHalfHeart

TheHalfHeart

Có sở thích viết tuts nên đã từng tham gia viết ở một số diễn đàn, đến năm 2014 mới có điều kiện sáng lập ra freetuts.net. Sinh năm 90 và có 1 vợ 2 con, thích ca hát và lập trình.

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.