การสร้าง element ด้วย Javascript

การสร้าง element ต่างๆขณะทำงานด้วย Javascript มีวิธีการหลักๆอยู่ 2 วิธีด้วยกันครับ คือการสร้างด้วย Ajax และ การสร้างด้วย Javascript

วิธีที่ 1 การสร้าง element ด้วย Ajax ก็มีหลักการตรงไปตรงมาเลยครับ ด้วยการให้ ไฟล์ PHP ที่ Ajax เรียกไป ส่งค่า HTML ของ input ที่ต้องการกลับมาเลย

ผมจะเสนอตัวอย่างโดยใช้ GAJAX นะครับ

โ้ค้ดด้านบนเป็นโค้ดส่วน Ajax ซึ่งเมื่อคลิกปุ่ม Create จะไปทำการร้องขอข้อมูลโดย Ajax ที่ element.php ซึ่งที่หน้า element.php (โค้ดด้านล่าง) จะมีการคืนค่าเป็น element ที่ต้องการมาเลย ในรูปแบบ HTML ซึ่งเราสามารถเขียน PHP เพื่อตรวจสอบข้อมูลหรือกระทำอื่นใดก่อนก็ได้เหมือน PHP ทั่วไปได้ครับ
ไฟล์ element.php ก็เป็นการคืนค่า element ต่างๆที่ต้องการเท่านั้นครับ

วิธีที่ 2 การสร้าง element ด้วย Javascript ซึ่งจริงๆแล้ว วิธีนี้เป็นวิธีที่ดีกว่าวิธีแรกครับ เพราะจะเป็นวิธีที่ถูกต้องตามหลักการมากกว่า ซึ่งในบางครั้งเราจะพบว่าการสร้าง element ตามวิธีแรก อาจให้ผลลัพท์ที่ไม่ตรงตามต้องการหรือมีการทำงานที่ไม่ค่อยปกติในบางครั้งครับ ซึ่งถ้าเราไม่สามารถปรับปรุงวิธีแรกให้ได้ผลตามที่ต้องการได้แล้วละก็ ให้ลองสร้าง element ตามวิธีที่ 2 นี้ครับ

หัวใจในการสร้าง element ตามวิธีนี้คือการใช้คำสั่ง createElement และ appendChild ของ Javascript ครับ
createElement ใช้ในการสร้าง element ใดๆก็ได้ที่ต้องการ โดยระบุชนิดของ element นั้นๆ เป็นพารามิเตอร์ให้กับฟังก์ชั่น คืนค่าเป็น object HTML ของ element นั้นๆ
appendChild ใช้สำหรับแทรก element ใดๆ ลงใน element ที่กำหนด โดย element ที่แทรกจะเป็น โหนดลูก (child node) ของ element ที่แทรก

เราสามารถทำแบบเดียวกันเพื่อสร้าง หลายๆ element ตามที่ต้องการได้นะครับ โดย element ที่แทรก(appendChild) ตัวต่อไป จะอยู่ถัดจาก element ที่มีอยู่แล้วครับ
จริงๆแล้ว ฟังก์ชั่นในกลุ่มนี้ยังมีอีกหลายตัวครับ ที่มีการทำงานคล้ายๆกัน ครับ

ในกรณีที่ 2 นี้ เราอาจจะไม่จำเป็นต้องใช้ Ajax เลยก็ได้ครับ หากเราสามารถกำหนดระบุชนิดของ element ที่ต้องการสร้างหลังจากกดปุ่ม Create ได้เป็นการตายตัว แต่หากเราจำเป็นต้องสร้าง element ที่จะต้องมีการตรวจสอบหรือกำหนดก่อนโดย PHP เราก็อาจส่งไปตรวจสอบยัง PHP ก่อนด้วย Ajax แล้วคืนค่าที่จำเป็นกลับมาเพื่อสร้าง element ที่ต้องการได้ครับ ซึ่งในการคืนค่ากลับมานั้นเราอาจใช้เทคนิคใดๆก็ได้ครับ ตามความถนัด เช่น text, JSON หรือ XML

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

โค้ด php จะทำการรับค่ามาแล้วตรวจสอบว่า ส่งค่าใดมา และคืนค่าที่เหมาะสมกลับไปยัง Ajax ครับ ตัวอย่างนี้จะเป็นการคืนค่าชนิดของ element ที่ต้องการเพียงอย่างเดียวนะครับ ในทางปฏิบัติ เราสามารถคืนค่ากลับหลายๆค่าได้ตามที่ต้องการโดยการส่งเป็น JSON XML หรือข้อความ text ใดๆก็ได้ตามถนัด แล้วนำกลับไปแยกและสร้าง element ที่เหมาะสมเอาเองก็ได้ครับ