Lấy nội dung bằng .html()

Trong jQuery có một hàm rất hữu dụng trong việc lấy nội dung của các thành phần html, đó chính là .html() – đơn gian, dễ sử dụng.

.html()

  • Bằng cách sử dụng .html() chúng ta có thể lấy nội dung html của thành phần này để thay thế cho nội dung html của thành phần kia.
  • Tham khảo thêm .html()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    var dHtml = $('div').html();
    $('li').html(dHtml);
});
</script>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
div,li {
    border: 2px solid #c00;
    padding: 10px;
}
li { border-color: #00c;}
</style>
</head>
<body>
<div>
<h3>Headline 3</h3>
<p>Thành phần p</p>
</div>

<ul>
<li>li</li>
<li>li</li>
</ul>
</body>
</html>

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

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

Trước khi có jQuery Sau khi có jQuery

<div>
<h3>Headline 3</h3>
<p>Thành phần p</p>
</div>

<ul>
<li>li</li>
<li>li</li>
</ul>

<div>
<h3>Headline 3</h3>
<p>Thành phần p</p>
</div>

<ul>
<li><h3>Headline 3</h3>
<p>Thành phần p</p>
</li>
<li><h3>Headline 3</h3>
<p>Thành phần p</p>
</li>
</ul>

Download file để thực hành

.html() kết hợp với function .click()

Html viết:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Học Web Chuẩn</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function(){
    var dHtml = $('div').html();
    
    $('button').click(function(){
        $('li').html(dHtml);
    });
});
</script>
<style>
* { /* reset lại margin và padding cho các tag */
    margin: 0;
    padding: 0;
}
div,li {
    border: 2px solid #c00;
    padding: 10px;
}
li { border-color: #00c;}
button {
    margin-bottom: 5px;
    padding: 0 5px;
}
</style>
</head>
<body>
<button>Click</button>
<div>
<h3>Headline 3</h3>
<p>Thành phần p</p>
</div>

<ul>
<li>li</li>
<li>li</li>
</ul>
</body>
</html>

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

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

Trước khi có jQuery Sau khi có jQuery

<div>
<h3>Headline 3</h3>
<p>Thành phần p</p>
</div>

<ul>
<li>li</li>
<li>li</li>
</ul>

<div>
<h3>Headline 3</h3>
<p>Thành phần p</p>
</div>

<ul>
<li><h3>Headline 3</h3>
<p>Thành phần p</p>
</li>
<li><h3>Headline 3</h3>
<p>Thành phần p</p>
</li>
</ul>

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *