มี ที่ นี่

Posts Tagged ‘element’

หลังจากที่ได้่ ติดตั้ง twitter บน wordpress ไป ก็อยากจะเขียน content มากขึ้น เลยอยากจะเสนอนู้น เสนอนี้ เสนอหน้าด้วยอิอิ ก็เลยขอหยิบขอที่ใช้ในชีวิตประจำวันขึ้นมาแล้วกัน เพื่อให้ได้เป็นความรู้ของคนที่อยากจะรู้ไปด้วยในตัว

วันนี้จะเสนอ แท่น แทน แท้นนนนนนน

DOM Elements Creator  ด้วย jQuery เพราะได้ใช้ jQuery มาพักนึงแล้ว ก็ได้แต่อ่านของคนอื่นเค้าเช่น jQueryTip เป็นต้น วันนี้ก็เลยเขียนเองบ้าง

DOM Elements Creator  มีไว้ทำอะไร พูดง่ายๆ ก็คือ เอาไว้ใช้สำหรับสร้าง Element DOM นั้นเอง เพราะการใช้ Dom create Element นึงนั้นอาจจะต้องเขียน code ขึ้นมาหลายบนนทัก คราวนี้ก็เลย ใช้ jQuery และ Plugin ตัวนี้ซะเลย ง่ายดี บรรทัดเดียวจบ

เิริ่มจาก รู้จักกันก่อน  ตัวจริงๆ อยู่ที่ http://plugins.jquery.com/project/DOMECทำ link ให้เลยนะครับ อิอิ ข้างในก็จะมี Official releases ให้ เอา version ล่านสุดแบบใหญ่แหละ จะได้ใช้ได้เต็มที่นะครับ

การใช้งานก็ง่ายมาก include lib นี้ด้วย javascript แล้วก็เรียกใช้ได้ (ต้องมี jQuery ด้วยนะ) จากนั้นก็เขียนแบบนี้

$.create('div', {'id': 'myId'}, 'myText').appendTo('#myElem');

ง่ายๆ คือ

div

สีแดงคือ element ที่เราสร้างขึ้นมา เช่นจะสร้าง span ก็ใส่ span ลงไป

'id': 'myId'

หมายถึง attribute นั่นเอง ใส่หลายอันได้นะ คั่นด้วย, ตามรูปแบบของ javascript

'myText'

หมายถึง innerHTML นั้นเอง หรือข้อมูลที่อยู่ข้างในนั้น บาง element ไม่มี text เช่น <br />

appendTo('#myElem');

สีเขียว คือ Element ที่เราต้องการจะใส่ลงไป โดยในกรณีนี้ก็เรียกจาก id=”myElem” นั่นเอง

ถ้าเราเขียนว่า

$.create('div', {'id': 'innerdiv'}, 'superHTMLinside').appendTo('#wrapper');

ก็จะหมายถึงเราสร้าง div มีข้อมูลข้างในคือ  superHTMLinside ใส่ลง Element ที่มี id คือ rapper

DOM อาจจะมองยากหน่อยแต่ถ้าเข้าใจโครงสร้างของ HTML ออกก็จะง่ายนะครับ