เมธอด add

เมธอด add เพิ่มองค์ประกอบที่กำหนด ลงในชุดองค์ประกอบที่มีอยู่แล้ว

ไวยากรณ์

การเพิ่มโดยใช้ซีเลกเตอร์:

javascript.add(ซีเลกเตอร์);

องค์ประกอบที่ต้องการเพิ่มถูกกำหนดโดยหนึ่ง หรือหลาย (เป็นอาร์เรย์) DOM องค์ประกอบ:

javascript.add(DOM องค์ประกอบ);

องค์ประกอบที่ต้องการเพิ่มถูกกำหนดโดยอ็อบเจกต์ jQuery:

javascript.add(อ็อบเจกต์ jQuery);

องค์ประกอบที่ต้องการเพิ่มถูกกำหนดโดยข้อความ html:

javascript.add(ข้อความ html);

องค์ประกอบที่ต้องการเพิ่มถูกค้นหาในหน้าเว็บด้วย ซีเลกเตอร์ที่กำหนด ภายในขอบเขต ที่กำหนดโดยพารามิเตอร์ที่สอง ขอบเขตการค้นหาสามารถ ถูกกำหนดโดย DOM องค์ประกอบ อ็อบเจกต์ jQuery หรืออ็อบเจกต์เอกสาร:

javascript.add(ซีเลกเตอร์, คอนเทกซ์);

ตัวอย่าง

เรามาค้นหาหน่วยย่อหน้าทั้งหมด ใส่ข้อความ '!' ต่อท้าย จากนั้นเพิ่มหัวข้อ h2 เข้าไปในชุดหน่วยย่อหน้าที่พบ และกำหนดสีแดงให้กับทั้งหัวข้อและหน่วยย่อหน้าในเวลาเดียวกัน:

html<div>ddd</div>
<h1>hhh</h1>
<p>ppp</p>
<div id="test"><h2>hhh</h2></div>
<p>ppp</p>
<h2>hhh</h2>
<p>ppp</p>

javascript$('p').append('!').add('h2').css('color', 'red');

ตัวอย่าง

เรามากำหนดคอนเทกซ์สำหรับการค้นหา - เพิ่มเฉพาะ h2 ที่อยู่ภายในองค์ประกอบ #test เท่านั้น:

javascriptlet $context = $('#test');
$('p').append('!').add('h2', $context).css('color', 'red');

ตัวอย่าง

สร้างคอนเทกซ์การค้นหาในรูปของ DOM องค์ประกอบด้วย เมธอด JavaScript querySelector:

javascriptlet context = document.querySelector('#test');
$('p').append('!').add('h2', context).css('color', 'red');

ตัวอย่าง

ส่วนใหญ่สามารถทำได้โดยไม่ต้องใช้คอนเทกซ์ เพียงแค่สร้างซีเลกเตอร์ที่ซับซ้อนขึ้น:

javascript$('p').append('!').add('#test h2').css('color', 'red');

ดูเพิ่มเติม