Tạo và bao bọc phần tử trong jQuery
Trước khi bao bọc bằng thẻ, bạn có thể tạo sẵn
phần tử trong tài liệu. Hãy bao bọc các đoạn văn
dưới đây bằng thẻ '<div></div>':
<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>
Để làm điều này, bạn có thể tạo sẵn phần tử trong
tài liệu bằng cách sử dụng
document.createElement('div'):
$('.www').wrap(document.createElement('div'));
Hoặc:
let div = document.createElement("div");
$('.www').wrap(div);
Tham số có thể truyền không chỉ là tên
thẻ, mà còn có thể là cấu trúc như '<div></div>'
- trong trường hợp này hiệu ứng sẽ hoàn toàn giống nhau:
$('.www').wrap('<div></div>');
Mã HTML sẽ trở thành như sau:
<div><p class="www">text</p></div>
<div><p class="www">text</p></div>
<div><p class="www">text</p></div>
<p>text</p>
Khi sử dụng cách thứ hai, vào
thẻ mở (trong trường hợp của chúng ta là '<div>')
có thể viết bất kỳ thuộc tính nào, khi đó
việc bao bọc sẽ đi kèm với những thuộc tính đó.
Hãy bao bọc các đoạn văn của chúng ta bằng div với lớp
zzz:
$('.www').wrap('<div class="zzz"></div>');
Mã HTML sẽ trở thành như sau:
<div class="zzz"><p class="www">text</p></div>
<div class="zzz"><p class="www">text</p></div>
<div class="zzz"><p class="www">text</p></div>
<p>text</p>
Hãy bao bọc mỗi h3 vào div
với lớp aaa.
