Previous Lesson Next Lesson

.html() trong jQuery

Định nghĩa và sử dụng .html() trong jQuery

.html(): Lấy nội dung HTML của thành phần, hoặc gán giá trị HTML cho thành phần.

Cấu trúc .html() trong jQuery

Đã được thêm vào từ phiên bản 1.0

.html()

Lấy nội dung HTML của thành phần

$('div').html();

.html('Nội dung HTML')

Gán nội dung HTML cho thành phần

$('div').html('<p>Nội dung html được thêm vào</p>');

Đã được thêm vào từ phiên bản 1.4

.html(function(){...})

$('div').html(function(){
    var txt = '<em>' + $('p').length + ' paragraphs!</em>';
    return '<p>All new content for ' + txt + '<p>';
});

.html()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    var divHtml = $('div').html();
    $('button').click(function(){
       alert(divHtml); 
    });
});
</script>
</head>

<body>
<div>
<p>Thành phần <span>span</span> bên trong thành phần cha</p>
</div>
<button>Click</button>
</body>
</html>

Hiển thị trình duyệt:

Với cách sử dụng $('div').html() ta đã lấy nội dung HTML của<div>.

.html('Nội dung HTML')

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').html('<p>Thành phần được thêm</p>');
});
</script>
</head>

<body>
<div></div>
</body>
</html>

Hiển thị trình duyệt:

Ban đầu thành phần <div> là thành phần rỗng, nhưng khi ta sử dụng .html('<p>Thành phần được thêm</p>') thì thành phần<div> đã được thêm nội dung.

.html(function(){...})

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Tiêu đề</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    $('div').html(function(){
    var txt = '<em>' + $('p').length + ' đoạn văn bản.</em>';
    return '<p>Tất cả nội dung gồm ' + txt + '<p>';
});
});
</script>
</head>

<body>
<p>Thành phần p 01</p>
<p>Thành phần p 02</p>
<div></div>
</body>
</html>

Hiển thị trình duyệt:

So sánh code HTML trước và sau khi có jQuery:

Previous Lesson Next Lesson

Preview

Viết câu trả lời

.html() trong jQuery

Định nghĩa và sử dụng .html() trong jQuery

Cấu trúc .html() trong jQuery

.html()

.html('Nội dung HTML')

.html(function(){...})

0 Bình luận

Danh mục bài học