การสร้างและการห่อหุ้มองค์ประกอบใน jQuery

ก่อนการห่อหุ้มด้วยแท็ก คุณสามารถสร้างองค์ประกอบในเอกสารล่วงหน้าได้ เรามาห่อหุ้มย่อหน้าด้านล่างนี้ด้วยแท็ก '<div></div>':

<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

สำหรับสิ่งนี้ คุณสามารถสร้างองค์ประกอบในเอกสารล่วงหน้าได้โดยใช้ document.createElement('div'):

$('.www').wrap(document.createElement('div'));

หรือ:

let div = document.createElement("div");
$('.www').wrap(div);

พารามิเตอร์สามารถส่งผ่านได้ไม่เพียงแค่ชื่อแท็ก แต่ยังรวมถึงโครงสร้างเช่นนี้ - '<div></div>' - ในกรณีนี้ผลลัพธ์จะเหมือนกันทุกประการ:

$('.www').wrap('<div></div>');

โค้ด HTML จะมีลักษณะดังนี้:

<div><p class="www">text</p></div>
<div><p class="www">text</p></div>
<div><p class="www">text</p></div>
<p>text</p>

เมื่อใช้วิธีที่สอง ใน แท็กเปิด (ในกรณีของเราคือ '<div>') คุณสามารถเขียนแอตทริบิวต์ใด ๆ ก็ได้ โดยที่ การห่อหุ้มจะเกิดขึ้นพร้อมกับแอตทริบิวต์เหล่านั้น

เรามาห่อหุ้มย่อหน้าของเราด้วย div ที่มีคลาส zzz:

$('.www').wrap('<div class="zzz"></div>');

โค้ด HTML จะมีลักษณะดังนี้:

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

จงห่อหุ้มแต่ละ h3 ด้วย div ที่มีคลาส aaa