บทช่วยสอนนี้จะอธิบายวิธีการเขียนโค้ด HTML แบบไดนามิกโดยใช้ JavaScript
จะเขียนโค้ด HTML แบบไดนามิกโดยใช้ JavaScript ได้อย่างไร
ในการเขียนโค้ด HTML โดยใช้ JavaScript ให้ใช้วิธีการต่อไปนี้:
วิธีที่ 1: เขียนโค้ด HTML แบบไดนามิกโดยใช้วิธี document.createElement()
ของจาวาสคริปต์ “ document.createElement() ” วิธีการด้วย “ ข้อความเนื้อหา คุณสมบัติ ” ใช้เพื่อเขียนโค้ด HTML ใน JavaScript แบบไดนามิก การใช้เมธอด createElement() คุณสามารถสร้างองค์ประกอบ HTML บางอย่างได้ และใช้คุณสมบัติ textContent เพื่อตั้งค่าเนื้อหาข้อความ
ไวยากรณ์
ใช้ไวยากรณ์ที่กำหนดเพื่อสร้างองค์ประกอบ HTML ใน JavaScript:
เอกสาร. สร้างองค์ประกอบ ( 'ชื่อแท็ก' )
ตัวอย่าง
ขั้นแรก เราจะสร้างย่อหน้าในไฟล์ JavaScript โดยใช้แท็ก HTML
ที่ส่งผ่านใน ' สร้างองค์ประกอบ () ' กระบวนการ:
คอสต์ ข้อความ = เอกสาร. สร้างองค์ประกอบ ( 'พี' ) ;ใช้คุณสมบัติ textContent เพื่อตั้งค่าข้อความในย่อหน้า:
ข้อความ. ข้อความเนื้อหา = 'ยินดีต้อนรับสู่ลินุกซ์' ;
สุดท้าย พิมพ์ข้อความบนหน้าเว็บโดยใช้ปุ่ม “ document.write() ' กระบวนการ:
เอกสาร. เขียน ( ข้อความ. ข้อความเนื้อหา ) ;ที่นี่ คุณจะเห็นผลลัพธ์ที่เราเขียนข้อความบนหน้าเว็บสำเร็จโดยใช้ JavaScript:
วิธีที่ 2: เขียนโค้ด HTML แบบไดนามิกโดยใช้คุณสมบัติ innerHTML
ในการเขียนโค้ด HTML แบบไดนามิก ให้ใช้ JavaScript “ HTML ภายใน ' คุณสมบัติ. เป็นวิธีที่ง่ายที่สุดในการเปลี่ยนแปลงเนื้อหาขององค์ประกอบ HTML รองรับทุกเบราว์เซอร์
ไวยากรณ์
ทำตามไวยากรณ์ที่กำหนดเพื่อใช้คุณสมบัติ innerHTML:
HTML ภายใน = 'ข้อความ'ตัวอย่าง
ในไฟล์ HTML ก่อนอื่นให้สร้างปุ่มที่จะเรียกใช้ฟังก์ชันที่กำหนดไว้ “ หัวข้อ () ” ใน JavaScript ในเหตุการณ์คลิก:
< ปุ่มบนคลิก = 'หัวเรื่อง ()' > คลิกที่นี่ ปุ่ม >สร้างย่อหน้าโดยใช้แท็ก
ซึ่งข้อความจะแสดงจาก JavaScript และกำหนดรหัสให้กับมัน:
< รหัสพี = 'หัวเรื่อง' > หน้า >กำหนดฟังก์ชัน “ หัวข้อ () ” ในไฟล์ JavaScript รับการอ้างอิงขององค์ประกอบ HTML โดยใช้รหัสที่กำหนดด้วยความช่วยเหลือของ ' getElementById() ” วิธีการและใช้ “ HTML ภายใน ” คุณสมบัติของมัน:
ส่วนหัวของฟังก์ชัน ( ) {เอกสาร. getElementById ( 'หัวเรื่อง' ) . HTML ภายใน = '
ยินดีต้อนรับสู่ Linuxint
' ;}
เอาต์พุต
เราได้รวบรวมข้อมูลสำคัญทั้งหมดที่เกี่ยวข้องกับการเขียนโค้ด HTML แบบไดนามิกโดยใช้ JavaScript
บทสรุป
ในการเขียนโค้ด HTML แบบไดนามิกใน JavaScript ให้ใช้ปุ่ม “ document.createElement() ” วิธีการด้วย “ ข้อความเนื้อหา ” ทรัพย์สินหรือ “ HTML ภายใน ' คุณสมบัติ. ในวิธีแรก คุณไม่จำเป็นต้องใช้โค้ด HTML ในขณะที่คุณสมบัติ innerHTML คุณต้องเข้าถึงองค์ประกอบ HTML และดำเนินการกับมัน ในบทช่วยสอนนี้ เราได้อธิบายวิธีการเขียนโค้ด HTML โดยใช้ JavaScript แบบไดนามิก