BASIC
EFFECTS
DOM
ADVANCED
JQUERY CĂN BẢN
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Bài 06: jQuery Attributes - html()

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é.

Cùng chuyên mục:

slideUp() và slideDown() trong jQuery

slideUp() và slideDown() trong jQuery

Nếu nói đến hiệu ứng slide thì ta phải tìm đến những ...

fadeIn() và fadeOut() trong jQuery

fadeIn() và fadeOut() trong jQuery

Không giống như show và hide, fadeIn và fadeOut sẽ hiển thị hoặc mờ ...

Show() và Hide() trong jQuery

Show() và Hide() trong jQuery

Hàm hide chỉ đơn giản là thiết lập thuộc tính ...

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

jQuery selector là gì? Trọn bộ selector trong jQuery đầy đủ nhất

Trong bài này chúng ta sẽ tìm hiểu về Selector trong jQuery, đây là bài…

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

jQuery là gì? Cách viết jQuery cho người mới bắt đầu

Trong công nghệ web 2.0 thì Javascript là một

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách ẩn hiện nội dung khi click vào button trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng All Selector (“*”) trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng :animated Selector trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Prefix Selector [name|=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Selector [name*=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Contains Word Selector [name~=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Ends With Selector [name$=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Equals Selector [name=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Not Equal Selector [name!=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng Attribute Starts With Selector [name^=”value”] trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :button Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checkbox Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng :checked Selector trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Child Selector (“parent > child”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Cách dùng Class Selector (“.class”) trong jQuery

Top