home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Javascript

appendChild JavaScript:A Guide

จาวาสคริปต์ appendChild() วิธีการเพิ่มรายการไปยังจุดสิ้นสุดของโหนด appendChild() มักใช้เพื่อเพิ่มรายการ

  • ลงในรายการ คุณต้องใช้คำสั่ง appendChild() หลายรายการ หากคุณต้องการเพิ่มมากกว่าหนึ่งรายการในโหนด

    วิธีใช้ JavaScript appendChild

    บางรายการมีข้อความ รายการอื่นๆ มีภาพ; รายการอื่นๆ มีองค์ประกอบเว็บที่กำหนดเอง สิ่งใดก็ตามที่อยู่ในรายการ สิ่งหนึ่งที่แน่นอนคือ หน้าเว็บเต็มไปด้วยรายการ

    เมื่อคุณสร้างรายการ คุณมักจะฮาร์ดโค้ดค่าของรายการโดยใช้ HTML กระบวนการนี้สามารถเร่งความเร็วได้โดยใช้วิธีการที่เรียกว่า JavaScript appendChild . วิธีนี้ช่วยให้คุณเพิ่มรายการต่อท้ายรายการหรือองค์ประกอบเว็บอื่นๆ เช่น blockquote

    ในคู่มือนี้ เราจะพูดถึงสิ่งที่ appendChild () ใน JavaScript คืออะไรและทำงานอย่างไร เราจะอธิบายตัวอย่างเพื่อช่วยคุณในการเริ่มต้น เริ่มกันเลย!

    JavaScript appendChild คืออะไร

    appendChild() เพิ่มโหนดที่ส่วนท้ายของโหนดหลัก appendChild() มักใช้เพื่อเพิ่มรายการในรายการ HTML โหนดอ้างถึงรายการใดๆ ใน HTML Document Object Model (DOM)

    ไวยากรณ์สำหรับ appendChild () เป็นดังนี้:

    parent.appendChild(child);

    “พาเรนต์” หมายถึงองค์ประกอบที่คุณต้องการเพิ่มลูก “ลูก” คือองค์ประกอบที่คุณต้องการต่อท้ายองค์ประกอบหลัก

    คุณต้องใช้วิธีเช่น JavaScript getElementById() หรือ "getter" อื่นเพื่อดึงองค์ประกอบ หรือคุณสามารถสร้างองค์ประกอบ HTML ใน JavaScript แล้วใช้องค์ประกอบนั้นเป็นวัตถุ “พาเรนต์” ด้วย appendChild()

    81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

    ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

    ตัวอย่างเช่น รายการสูตรสโคนจะมีรายการโหนด โหนดเหล่านี้น่าจะเป็นแท็ก

  • เนื่องจากเราจะสร้างรายการ

    ผู้ปกครอง

    ซึ่งมี แท็กจะมีลูก โหนด การใช้งานทั่วไปของ appendChild() คือการเพิ่ม
  • แท็กไปยังรายการเช่น
      หรือ
        .

        appendChild() JavaScript:ตัวอย่าง

        มาสร้างแอปพลิเคชันที่ใช้ appendChild . กันเถอะ . เรากำลังจะสร้างไซต์ที่โหลดรายชื่อนักเรียนในชั้นประถมศึกษาปีที่ 10 เราจะแบ่งสิ่งนี้ออกเป็นสามขั้นตอน:

        • การตั้งค่าส่วนหน้า
        • การเลือกและสร้างองค์ประกอบ
        • การใช้ appendChild

        การตั้งค่าส่วนหน้า

        อันดับแรก เราจะตั้งค่าส่วนหน้าพื้นฐานที่แสดงรายการชื่อนักเรียนของเรา เปิดไฟล์ชื่อ index.html และวางโค้ดนี้:

        <!DOCTYPE html>
<html>
    <head>
   	 <title>Tenth Grade Class Roster</title>
   	 <link rel="stylesheet" href="styles.css">
    </head>
    <body>
   	 <h1>Tenth Grade Class Roster</h1>
   	 <ul>
   	 </ul>
    </body>
    <script src="scripts.js"></script>
</html>

        เราได้สร้างเอกสาร HTML พื้นฐาน เอกสารนี้มีชื่อและรายการที่ไม่มีรายการย่อย รายการจะแสดงด้วย

          แท็ก.

          ต่อไป มาเพิ่มสไตล์สองสามอย่างในเพจของเราในไฟล์ชื่อ styles.css เพื่อปรับปรุงความสวยงามของหน้าเว็บของเรา:

          body {
    background-color: #f7f7f7;
    margin: auto;
    width: 50%;
}

          กฎ CSS นี้จะกำหนดสีพื้นหลังสีเทาอ่อนสำหรับหน้าเว็บของเรา เราทำสิ่งนี้โดยใช้คุณสมบัติสีพื้นหลัง CSS นอกจากนี้ยังจะย้ายเนื้อหาของ แท็กไว้ตรงกลางหน้า หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีที่เราจัดโครงสร้างเลย์เอาต์ โปรดดูคู่มือโมเดลกล่อง CSS ของเรา

          เพจของเรายังใช้งานไม่ได้ เรายังไม่ได้เพิ่มองค์ประกอบรายการใดๆ นี่คือลักษณะที่หน้าของเราเมื่อคุณเปิดขึ้นในเบราว์เซอร์:

          appendChild JavaScript:A Guide

          เห็นได้ชัดว่ายังมีงานต้องทำ มาเพิ่ม JavaScript ลงในหน้าเว็บของเรากันเถอะ

          การเลือกและสร้างองค์ประกอบ

          ก่อนที่เราจะสามารถเพิ่มรายการลงในรายการของเราได้ เราต้องเลือกองค์ประกอบที่เราจะใช้งาน เปิดไฟล์ชื่อ scripts.js และเพิ่มโค้ดนี้:

          const students = document.querySelector("ul");

          โค้ดบรรทัดนี้จะเลือกรายการในหน้าของเราที่มีแท็ก

            . นี่แสดงถึงรายการของเรา ต่อไป เราจะสร้างองค์ประกอบเพื่อเพิ่มในรายการของเรา:

            let li = document.createElement("li");
li.textContent = "Steven";

            รหัสนี้สร้างโหนดข้อความที่มี

          • แท็กที่มีคำว่า "สตีเว่น" ตอนนี้เหลือเพียงเพิ่มองค์ประกอบที่สร้างขึ้นใหม่ลงในรายการของเรา

            การใช้คำสั่ง appendChild() JavaScript

            ผนวกลูก () ช่วยให้เราสามารถเพิ่มองค์ประกอบไปยังโหนด เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของไฟล์ scripts.js:

            students.appendChild(li);

            การดำเนินการนี้จะเพิ่มรายการที่เราสร้างไว้ก่อนหน้านี้ลงในรายการของเรา มาเปิดหน้าเว็บของเราและดูผลลัพธ์:

            appendChild JavaScript:A Guide

            รายการของเราตอนนี้มีหนึ่งรายการ เราสามารถทำให้โค้ดของเรามีประสิทธิภาพมากขึ้นโดยการสร้างฟังก์ชันที่เพิ่มรายการลงในรายการของเรา ซึ่งจะทำให้เราสามารถเพิ่มหลายรายการโดยไม่ต้องทำซ้ำ createElement . ของเรา รหัสจากก่อนหน้านี้

            เปลี่ยน createElement และ เนื้อหาข้อความ บรรทัดของรหัสนี้:

            function createStudent(name) {
	let li = document.createElement("li");
li.textContent = name;
return li;
}

            ฟังก์ชันนี้จะสร้าง

          • . ใหม่ องค์ประกอบเมื่อใดก็ตามที่มันถูกเรียก จากนั้นเปลี่ยน appendChild () คำสั่งให้ใช้ฟังก์ชันนี้:

            students.appendChild(createStudent("Mark"));
students.appendChild(createStudent("Chloe"));
students.appendChild(createStudent("Louise"));

            สิ่งนี้จะสร้างนักเรียนสามคน:Mark, Chloe และ Louise มาเปิดไฟล์ index.html ของเราอีกครั้งและดูว่าได้ทำการเปลี่ยนแปลงแล้วหรือไม่:

            appendChild JavaScript:A Guide

            รายชื่อชั้นเรียนของเราตอนนี้มีสามชื่อ

            ย้ายรายการไปยังรายการอื่น

            คุณสามารถย้ายรายการไปยังรายการอื่นได้โดยใช้ appendChild () กระบวนการ. มาแสดงสิ่งนี้โดยแก้ไขตัวอย่างของเราจากด้านบน ขั้นแรก ให้เปลี่ยนหน้า HTML ของเราเพื่อให้มีสองรายการ:

            …
    <body>
   	 <h1>Tenth Grade Class Roster</h1>
	<h3>Sat Test</h3>
   	 <ul id="sat_test">
   	 </ul>
	<h3>Has Not Sat Test</h3>
<ul id="has_not_sat_test">
   	 </ul>
    </body>
...

            เราได้สร้างรายการสองรายการ:การทดสอบ sat และ ยังไม่ได้ การทดสอบ sat ตอนนี้ มาอัปเดตไฟล์ JavaScript เพื่อเลือกรายการสองรายการของเราและสร้างนักเรียนสามคน:

            const sat_test = document.getElementById("sat_test");
const has_not_sat_test = document.getElementById("has_not_sat_test");

function createStudent(name) {
	let li = document.createElement("li");
li.textContent = name;
return li;
}

has_not_sat_test.appendChild(createStudent("Mark"));
has_not_sat_test.appendChild(createStudent("Chloe"));
has_not_sat_test.appendChild(createStudent("Louise"));

            เราใช้เมธอด getElementById เพื่อเลือกสองรายการของเรา

            รหัสนี้จะเพิ่ม Mark, Chloe และ Lucy ลงในรายการ "ยังไม่ได้ทดสอบ" หลุยส์เพิ่งทำการทดสอบ ดังนั้นเธอจึงสามารถย้ายไปอยู่ในรายชื่ออื่นได้ เราสามารถย้ายชื่อของเธอโดยใช้ appendChild () เมธอดและเมธอดอื่นที่เรียกว่า lastChild :

            var louise = has_not_sat_test.lastChild;
sat_test.appendChild(louise);

            รหัสนี้เลือกองค์ประกอบ DOM สุดท้ายในรายการ "ยังไม่ได้ทดสอบ" รายการนี้ถูกดึงข้อมูลโดยใช้วิธีlastChild ต่อไป เราได้เพิ่มรายการนี้ลงในรายการ "การทดสอบวันเสาร์"

            มาเปิดไฟล์ HTML ของเรากันเถอะ:

            appendChild JavaScript:A Guide

            เรามีสองรายการ:การทดสอบ sat และ ไม่ได้ทดสอบ sat เริ่มแรก เราย้ายชื่อนักเรียนทั้งหมดไปที่รายการ "ยังไม่ได้สอบ" จากนั้น เราใช้ appendChild () ย้ายชื่อหลุยส์ไปอยู่ในรายการ "สอบเสาร์"

            บทสรุป

            ผนวกลูก () วิธีการใช้เพื่อสร้างโหนดที่ส่วนท้ายขององค์ประกอบ คุณสามารถใช้ appendChild() เพื่อเพิ่มองค์ประกอบใดๆ ลงในรายการองค์ประกอบ ตัวอย่างเช่น คุณสามารถเพิ่ม

            องค์ประกอบลงในแท็ก

            เป็นเรื่องท้าทาย ลองดูว่าคุณสามารถใช้ appendChild . ได้หรือไม่ () วิธี JavaScript เพื่อสร้างตารางของรูปภาพ เมื่อโหลดหน้าเว็บ ควรแสดงรายการภาพสี่ภาพโดยใช้ appendChild ().

            สำหรับคำแนะนำเกี่ยวกับหลักสูตรออนไลน์ JavaScript และแหล่งข้อมูลการเรียนรู้ชั้นนำ โปรดดูคู่มือ How to Learn JavaScript