Jul
12
2010

ตัวอย่างการใช้ appendTo() แบบง่ายๆครับ

An article by บริษัท เก้ายอดสตูดิโอ จำกัด

Comments Off

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

appendTo คืออะไร ?
appendTo มันใช้ทำอะไร ?
appendTo แล้วทำไมถึงเลือกใช้ ?
appendTo มันดียังไง ?

บอกตรงๆเมื่อก่อนผมก็มีคำถามพวกนี้ครับ มีคำถามมากหมายเกิดขึ้น เพราะอะไร เพราะเรายังไม่เคยใช้มันครับ เป็นกันทุกคนแหละผมว่านะ เพราะถ้าไม่คุ้นเคย ไม่เคยใช้มัน แน่นอนแหละว่าต้องเกิดคำถามขึ้นมา

การหาคำตอบของคำถามนี้ก็มีมากหมายครับใน Internet แต่จะอธิบายได้เข้าใจหรือเปล่านั้นก็แล้วแค่ว่า คนที่เขียนบทความนั้นๆ อธิบายละเอียดแค่ใหน หรือว่ายกตัวอย่างได้เข้าใจแค่ใหน มาดูกันเลยดีกว่าครับ ผมจะยกจากปัญหาที่ผมเจอ ตอนที่กำลัง code งานสดๆตอนตีสองกว่าๆนี้เลย กับ Function appendTo();

คำว่า append มันก็ตรงตัวอยู่แล้วครับสำหรับคำแปลของมัน append = การนำไปต่อท้าย เช่นตัวอย่างนี้ครับ

ยกตัวอย่าง เรามี tag DIV อยู่ 1 ตัวและข้างในก็ไม่มีอะไรนะครับ

1	<div id="myDiv">.....</div>

ถ้าหากเราต้องการจะใส่ Tag SPAN ที่มีข้อความอยู่ข้างใน tag DIV นี้จะทำยังไงดี

1	<div id="myDiv"><span>Hello World!!!!</span></div>

มาดู code กันครับว่าเขียนยังไง ง่ายมากๆ

1
2
3
4

เพียงเท่านี้ ทั้ง tag SPAN และข้อความข้อในก็จะถูกนำไปใส่ภายใต้ DIV ที่เราต้องการครับในที่นี้ก็คือ id myDiv นั้นเอง การนำไปใช้งานนั้นคือ เราอาจจะรับค่าที่ได้มาเป็น HTML เช่นการ ส่ง Request แบบ AJAX ไปและรับค่ากลับมาเป็น HTML และต้องการแสดงผลที่รับมา เราก็จะใช้ appendTo ในการแทรกสิ่งที่เราต้องการใน element นั้นๆที่เราต้องการจะให้มันโชว์

ตัวอย่างการนำไปใช้งานของผมคร่างๆเป็นแนวทางครับ
ผมจะส่ง Request แบบ POST ไปยัง file PHP file หนึ่งเพื่อดึงเอาข้อมูล HTML ออกมาแสดงผลใน element ที่เราต้องการนะครับ

1
2
3
4
5
6
7
8
9
10
11