JavaScript เป็นภาษาโปรแกรมอเนกประสงค์ที่อนุญาตให้สร้างและจัดการองค์ประกอบเช่นเดียวกับ HTML (Hyper Text Markup Language) เป็นไปตามวิธี 'ผนวก ()' และ 'ผนวกเด็ก ()' เพื่อใช้งานฟังก์ชันนี้ ตามชื่อที่แนะนำ ทั้งสองวิธีต่อท้ายองค์ประกอบ HTML เช่น วัตถุสตริงหรือโหนด อย่างไรก็ตาม สิ่งเหล่านี้แตกต่างกันขึ้นอยู่กับฟังก์ชันการทำงานและปัจจัยอื่นๆ
คู่มือนี้เน้นความแตกต่างที่สำคัญระหว่าง jQuery “ ผนวก ()” และ JavaScript “ ผนวกเด็ก ()” วิธีการ
ก่อนที่จะไปยังความแตกต่างระหว่าง jQuery “ ผนวก ()” และ JavaScript “ ผนวกเด็ก ()” วิธีการ ก่อนอื่นให้ดูที่พื้นฐานของวิธีการเหล่านี้
jQuery ผนวก () วิธีการคืออะไร?
jQuery “ ผนวก ()” วิธีการแทรกวัตถุ “โหนด” และ “สตริง” ที่ต้องการในตอนท้ายเป็นลูกคนสุดท้ายขององค์ประกอบหลัก
ไวยากรณ์
$ ( ตัวเลือก ) . ผนวก ( เนื้อหา , การทำงาน ( ดัชนี , html ) )ในไวยากรณ์ข้างต้น:
- เนื้อหา : หมายถึงองค์ประกอบ HTML องค์ประกอบ DOM หรือวัตถุ jQuery
- การทำงาน : เป็นพารามิเตอร์เพิ่มเติมที่ระบุฟังก์ชัน JavaScript ที่ผู้ใช้กำหนดโดยมีพารามิเตอร์ 'ดัชนี (ตำแหน่งองค์ประกอบ)' และ 'html (html ขององค์ประกอบที่เลือก)'
วิธีการ JavaScript appendChild() คืออะไร?
เมธอด “appendChild()” จะเพิ่มวัตถุ “Node” หลังลูกสุดท้ายขององค์ประกอบพาเรนต์เท่านั้น ก่อนอื่นจะสร้างวัตถุโหนดที่ต้องการโดยใช้เมธอด “createElement()” แล้วจึงต่อท้าย
ไวยากรณ์
องค์ประกอบ. ผนวกเด็ก ( โหนด )ไวยากรณ์นี้ต้องการเพียงพารามิเตอร์เดียวเท่านั้น เช่น “ โหนด '.
ตามที่ชื่อของพวกเขาแนะนำวิธีการที่กล่าวถึงข้างต้นนั้นแตกต่างกัน ส่วนนี้จะอธิบายถึงปัจจัยบางอย่างที่แตกต่างกัน ลองดูที่พวกเขา
ความแตกต่างระหว่าง jQuery append() และ JavaScript appendChild() วิธีการ
| ข้อกำหนด | jQuery ผนวก () | JavaScript ผนวกเด็ก () |
|---|---|---|
| การใช้งาน | สามารถใช้ต่อท้ายองค์ประกอบหลักโดยเพิ่มใหม่ “ โหนด ' และ ' สตริง ” วัตถุในเวลาเดียวกัน | สามารถใช้เพื่อต่อท้ายองค์ประกอบพาเรนต์ด้วย ' โหนด ” สร้างขึ้นโดยใช้ “ สร้างองค์ประกอบ ()' วิธี. |
| วัตถุโหนดหลายรายการ | “ ผนวก เมธอด ()” สามารถเพิ่มวัตถุโหนดหลายรายการในองค์ประกอบหลักที่เกี่ยวข้องพร้อมกันในรูปแบบต่อไปนี้ รูปแบบ : “div.append(ลูกคนแรก, ลูกคนที่สอง, 'Linuxhint');” |
“ ผนวกเด็ก เมธอด ()” ทำงานได้ดีกับวัตถุโหนดหลายตัว แต่จะต่อท้ายลูกคนแรกในแต่ละครั้งเท่านั้น จากนั้นจึงเพิ่มลูกถัดไป รูปแบบ : 'div.appendChild(ลูกคนแรก, ลูกคนที่สอง, 'Linuxhint');' |
| ค่าส่งคืน | “ ผนวก ()” วิธีการไม่ส่งคืนวัตถุโหนดต่อท้ายเนื่องจากแสดงค่าที่ส่งคืน 'ไม่ได้กำหนด' เช่น รูปแบบ : console.log(appendChildValue) // ไม่ได้กำหนด |
ในทางกลับกัน “ ผนวกเด็ก เมธอด ()” จะส่งคืนค่าที่มีวัตถุโหนดต่อท้าย รูปแบบ : console.log(appendChildValue) //
|
ตอนนี้ไปยังการใช้งานจริงของความแตกต่างที่สำคัญที่ระบุไว้
ความแตกต่าง 1: การใช้ jQuery append() และ JavaScript appendChild() วิธีการ
ตามข้อแตกต่างข้อแรก คำว่า “ ผนวก เมธอด ()” ต่อท้ายทั้งโหนดและสตริงในขณะที่เมธอด “appendChild()” ต่อท้ายวัตถุโหนดเท่านั้น
รหัส HTML
ขั้นแรก ดูรหัส HTML ที่ระบุไว้:
< ร่างกาย >< ชั่วโมง2 > jQuery 'ผนวก ()' วิธีการ < / ชั่วโมง2 > // สำหรับผนวก () < ชั่วโมง2 > jQuery วิธี 'ต่อท้ายเด็ก ()' < / ชั่วโมง2 > // สำหรับ appendChild()
< ปุ่ม รหัส = 'btn1' เมื่อคลิก = 'myFunc1()' > ต่อท้ายสตริง DOM < / ปุ่ม >
< ปุ่ม รหัส = 'บีทีเอ็นทู' เมื่อคลิก = 'myFunc2()' > ผนวกโหนด DOM < / ปุ่ม >
< หน้า รหัส = 'สำหรับ' > นี่คือย่อหน้า < / หน้า >
< เก่า รหัส = 'รายการ' >
< ที่ > บทช่วยสอนจาวาสคริปต์ 1 < / ที่ >
< ที่ > บทช่วยสอนจาวาสคริปต์ 2 < / ที่ >
< ที่ > การสอนจาวาสคริปต์ 3 < / ที่ >
< / เก่า >
< / ร่างกาย >
ในบรรทัดรหัสด้านบน:
- แท็ก “
” กำหนดหัวข้อย่อยของระดับ 2
- แท็ก “
- แท็ก “
” สร้างย่อหน้าว่างด้วยรหัสที่กำหนด “para” เพื่อแสดงค่าสตริงต่อท้าย
- แท็ก “
- ” จะเพิ่มรายการสั่งซื้อด้วยรหัส “list” และรายการที่แสดงด้วยความช่วยเหลือของแท็ก “
- ”
บันทึก : ทำตามโค้ด HTML ที่เขียนไว้ด้านบนในส่วนต่างแรกของทั้งเมธอด “append()” และ “appendChild()”
“ต่อท้าย()” วิธี jQuery รหัส
ประการแรก ภาพรวมของโค้ด jQuery ของเมธอด “append()”:
< ศีรษะ >< สคริปต์ src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js' > สคริปต์ >
< สคริปต์ >
$ ( เอกสาร ) . พร้อม ( การทำงาน ( ) {
$ ( “#btn1” ) . คลิก ( การทำงาน ( ) {
$ ( 'พี' ) . ผนวก ( ' ต่อท้ายสตริง ' ) ;
} ) ;
$ ( “#btn2” ) . คลิก ( การทำงาน ( ) {
$ ( 'แก่' ) . ผนวก ( '
} ) ;
} ) ;
สคริปต์ >
ศีรษะ >
ในบรรทัดรหัสด้านบน:
- ขั้นแรก ระบุ jQuery “ ซีดีเอ็น ” เส้นทางจากเว็บไซต์อย่างเป็นทางการ “ https://jquery.com/ ” ด้วยความช่วยเหลือของ “ src ' คุณลักษณะ.
- ถัดไป เพิ่มส่วนสคริปต์ขนาดเล็กที่ใช้ ' พร้อม ()” วิธีการเรียกที่ระบุ “ การทำงาน ()” เมื่อโหลดเอกสาร HTML
- หลังจากนั้น “ คลิก เมธอด ()” เรียกใช้ฟังก์ชันที่เชื่อมโยงกับปุ่มที่มีรหัสคือ “ btn1 ” เมื่อคลิกปุ่ม
- ในนิยามของฟังก์ชัน คำว่า “ ผนวก วิธีการ ()” ใช้เพื่อต่อท้ายองค์ประกอบย่อหน้าเป้าหมายด้วยสตริงที่ระบุ
- กระบวนการเดียวกันนี้เสร็จสิ้นสำหรับการเพิ่ม “ รายการสั่งซื้อ ” เช่น โหนดวัตถุที่จะผนวกเข้ากับรายการที่กำหนด
เอาต์พุต
ที่นี่ได้รับการยืนยันว่าทั้งวัตถุ 'String' และ 'Node' ถูกต่อท้ายโดยใช้เมธอด 'append()'
“appendChild()” วิธีการโค้ดจาวาสคริปต์
ตอนนี้ดูวิธีการใช้งาน JavaScript “appendChild()”:
< สคริปต์ >การทำงาน myFunc1 ( ) {
สำหรับ. ผนวกเด็ก ( '
ต่อท้ายสตริง
' ) // ผนวกสตริง DOM} การทำงาน myFunc2 ( ) {
คอสต์ องค์ประกอบ = เอกสาร. สร้างองค์ประกอบ ( 'ที่' ) ;
คอสต์ โหนด = เอกสาร. สร้างโหนดข้อความ ( 'รายการต่อท้าย' ) ;
องค์ประกอบ. ผนวกเด็ก ( โหนด ) ; // ผนวกโหนด DOM
คอสต์ องค์ประกอบ = เอกสาร. getElementById ( 'รายการ' ) ;
องค์ประกอบ. ผนวกเด็ก ( องค์ประกอบ ) ;
}
สคริปต์ >
ในข้อมูลโค้ดด้านบน:
- กำหนดชื่อฟังก์ชัน “ myFunc1 ()” ที่ใช้เมธอด “appendChild()” เพื่อต่อท้ายย่อหน้าที่เพิ่มด้วยสตริงที่กำหนด
- ต่อไปใน “ myFunc2 ฟังก์ชัน ()” เมธอด “createElement()” จะสร้างองค์ประกอบรายการใหม่ แล้วเพิ่มข้อความเข้าไปโดยใช้เมธอด “createTextNode()”
- หลังจากนั้น ผนวกโหนดรายการที่สร้างขึ้นด้วยข้อความโดยใช้เมธอด “appendChild()”
- สุดท้าย ผนวกโหนดรายการที่สร้างขึ้นใหม่เข้ากับรายการสั่งซื้อที่เข้าถึงซึ่งมีรหัสเป็น 'รายการ' ด้วยความช่วยเหลือของวิธีการ 'ผนวกเด็ก ()'
เอาต์พุต
ดังที่เห็น มีเพียงวัตถุ 'โหนด' เท่านั้นที่ต่อท้ายเมื่อคลิกปุ่ม ไม่ใช่ 'สตริง'
ข้อผิดพลาด
กด “F12” เพื่อเปิดเว็บคอนโซลและตรวจสอบปัญหา:
ดังที่เห็น คอนโซลแสดงข้อผิดพลาดในการต่อท้ายวัตถุสตริงโดยใช้เมธอด “appendChild()” ดังนั้นจึงได้รับการยืนยันว่าเมธอด “appendChild()” ไม่ได้ต่อท้ายวัตถุ String
ความแตกต่าง 2: การใช้ jQuery append() และ JavaScript appendChild() วิธีการกับวัตถุโหนดหลายรายการ
ความแตกต่างประการที่สองระหว่างเมธอด “append()” และ “appendChild()” สามารถวิเคราะห์ได้โดยการใช้เมธอดเหล่านี้กับออบเจกต์หลายโหนด หากต้องการดูการใช้งานจริง ให้ทำตามรหัสที่กำหนด
รหัส HTML
มาดูรหัส HTML:
< แผนก รหัส = 'หลัก div' >< แผนก สไตล์ = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > หนึ่ง < / แผนก >
< แผนก สไตล์ = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > สอง < / แผนก >
< แผนก สไตล์ = 'display:flex; justify-content:center; align-items:center; width:50px; height:50px; background:orangered; margin:10px; text-align:center;' > สาม < / แผนก >
< / แผนก >
ที่นี่ บรรทัดโค้ดด้านบนประกอบด้วยองค์ประกอบหลัก “
บันทึก : โค้ด HTML ที่เขียนไว้ข้างต้นถูกตามด้วยความแตกต่างที่สองของทั้งเมธอด “append()” และ “appendChild()”
ผนวก () วิธีการ
ตอนนี้ดำเนินการตามสคริปต์ต่อไปนี้:
< สคริปต์ >คอสต์ แผนกหลัก = เอกสาร. getElementById ( 'หลัก div' ) ;
คอสต์ div4 = เอกสาร. สร้างองค์ประกอบ ( 'ดิฟ' ) ;
div4 HTML ภายใน = 'สี่' ;
div4 สไตล์ . สีพื้นหลัง = 'สีชมพู' ;
div4 รายการคลาส . เพิ่ม ( 'ดิฟ' ) ; คอสต์ div5 = เอกสาร. สร้างองค์ประกอบ ( 'ดิฟ' ) ;
div5. HTML ภายใน = 'ห้า' ;
div5. สไตล์ . สีพื้นหลัง = 'สีชมพู' ;
div5. รายการคลาส . เพิ่ม ( 'ดิฟ' ) ;
แผนกหลัก ผนวก ( div4 , div5 ) ;
สคริปต์ >
ในข้อมูลโค้ดด้านบน:
- ตัวแปร “maindiv” เข้าถึง “div” ที่เพิ่มเข้ามาโดยใช้ id “main-div” ด้วยความช่วยเหลือของเมธอด “getElementById()”
- ถัดไป เมธอด “createElement()” จะสร้างวัตถุโหนด “div” ใหม่ เพิ่มข้อความที่ระบุโดยใช้คุณสมบัติ “innerHTML” และใช้สีพื้นหลังผ่านคุณสมบัติ “style.backgroundcolor”
- หลังจากนั้นเมธอด “add()” จะเพิ่มคุณสมบัติคลาส CSS ที่ระบุโดยใช้คุณสมบัติ “classList”
- ทำตามขั้นตอนเดียวกันสำหรับองค์ประกอบ “” ที่สร้างขึ้นใหม่ถัดไป
- สุดท้าย วัตถุโหนดทั้งสองที่สร้างขึ้นใหม่จะถูกต่อท้ายพร้อมกันโดยใช้เมธอด “append()”
เอาต์พุต
ที่นี่ วัตถุโหนดหลายโหนดที่สร้างขึ้นใหม่จะถูกผนวกเข้ากับองค์ประกอบพาเรนต์เดียวกันตามนั้น
วิธีการ “appendChild()”
ถัดไป ดำเนินการต่อด้วยวิธี “appendChild()”:
< สคริปต์ >
แผนกหลัก ผนวกเด็ก ( div4 ) ;
แผนกหลัก ผนวกเด็ก ( div5 ) ;
สคริปต์ >ดังที่เห็น วิธีการ “appendChild()” จะเพิ่มวัตถุโหนดหลายรายการทีละรายการไปยังองค์ประกอบหลักเดียวกัน
เอาต์พุต
ผลลัพธ์จะเหมือนกับเมธอด “append()” แต่แตกต่างกันในการระบุ Node object
ความแตกต่าง 3: ค่าส่งคืนของ jQuery ที่นำไปใช้ append() และ JavaScript appendChild() วิธีการ
ข้อแตกต่างสุดท้ายคือ 'ค่าที่ส่งคืน' ของเมธอด 'append()' และ 'appendChild()' มาดูกันในทางปฏิบัติ
บันทึก : รหัส HTML เหมือนกับความแตกต่าง 2 (หลายโหนดวัตถุ)
วิธีการ 'ผนวก ()'
ดูบรรทัดรหัสที่กำหนด:
< สคริปต์ >
คอนโซล บันทึก ( แผนกหลัก ผนวก ( div4 ) ) ;
สคริปต์ >ที่นี่ มีการใช้เมธอด “console.log()” เพื่อตรวจสอบค่าที่ส่งคืนของเมธอด “append()” ในขณะที่ต่อท้ายวัตถุโหนดที่ระบุ
เอาต์พุต
กด “F12” เพื่อเปิดเว็บคอนโซล:
ตามที่เห็นค่าที่ส่งคืนของเมธอด 'ผนวก ()' คือ ' ไม่ได้กำหนด '.
appendChild() วิธีการ
ตอนนี้ให้พิจารณาโค้ดต่อไปนี้โดยใช้เมธอด “appendChild()”:
< สคริปต์ >
คอนโซล บันทึก ( แผนกหลัก ผนวกเด็ก ( div4 ) ) ;
สคริปต์ >ระบุเมธอด “appendChild()” ด้วยเมธอด “console.log()” เช่นเดียวกับเมธอด “append()”
เอาต์พุต
ที่นี่ เอาต์พุตจะส่งคืนองค์ประกอบ HTML ที่ต่อท้าย รวมถึงคุณสมบัติการกำหนดรูปแบบแทน
บทสรุป
jQuery “ ผนวก ()” และ JavaScript “ ผนวกเด็ก ()” วิธีการจะแตกต่างกันไปตามพื้นฐานของ “ ไวยากรณ์”, “การใช้งาน” และ “หลายโหนดวัตถุ '. นอกจากนี้พวกเขา “ ค่าที่ส่งคืน ” ก็แตกต่างกันไปด้วย ทั้งสองวิธีมีประโยชน์และการใช้งานขึ้นอยู่กับตัวเลือกของผู้ใช้ คู่มือนี้แสดงรายการความแตกต่างระหว่าง jQuery “ ผนวก ()” และ JavaScript “ ผนวกเด็ก ()” วิธีการในทางปฏิบัติ