สิ่งที่คุณต้องรู้เกี่ยวกับ HTML ภายในใน JavaScript

JavaScript เป็นหนึ่งในภาษาโปรแกรมที่ใช้กันอย่างแพร่หลาย นอกจากนี้ยังเป็นที่นิยมมากสำหรับความคล่องตัวในทุกแพลตฟอร์ม มีคุณสมบัติที่แตกต่างกันใน ที่ทำให้งานสร้างเว็บไซต์แบบไดนามิกของคุณง่ายขึ้น ในบทความนี้เราจะพูดถึง Inner HTML ใน JavaScript ตามลำดับต่อไปนี้:

• รู้เบื้องต้นเกี่ยวกับ JavaScript
• HTML ภายในใน JavaScript
  • รายการสั่งซื้อหรือไม่เรียงลำดับ
  • การเปลี่ยน URL

รู้เบื้องต้นเกี่ยวกับ JavaScript

JavaScript ใช้เป็นภาษาโปรแกรมฝั่งไคลเอ็นต์เช่นเดียวกับภาษาโปรแกรมฝั่งเซิร์ฟเวอร์ ใช้ในการดำเนินการ บนฝั่งไคลเอ็นต์และฝั่งเซิร์ฟเวอร์ของแอปพลิเคชันใด ๆ โหนดสามารถเรียกว่า Node.js ได้หลายที่

JavaScript มีวิธีการมากมายเหลือเฟือสำหรับฟังก์ชันต่างๆที่จะดำเนินการได้อย่างง่ายดาย นี่คือสิ่งที่ทำให้ JavaScript เป็นหนึ่งในภาษาโปรแกรมที่ได้รับความนิยมมากที่สุดและยังมีการใช้กันอย่างแพร่หลายในการพัฒนาผลิตภัณฑ์หลายประเภท

HTML ภายในใน JavaScript

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

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

อาจฟังดูยากสักหน่อย แต่เรามาลองทำความเข้าใจกับตัวอย่างนี้กันดีกว่า

ตัวอย่าง:

 
คลิกที่นี่เพื่อเปลี่ยนข้อความ innerHTML
ฟังก์ชัน myFunction () {document.getElementById ('paragraph1'). innerHTML = 'เปลี่ยนย่อหน้า!' }

ที่นี่ในโค้ดด้านบนในแท็กย่อหน้ารหัสของนั้นคือย่อหน้าที่ 1

เริ่มต้นกับสตูดิโอภาพ

มี ฟังก์ชัน ชื่อ myfunction () ซึ่งจะถูกเพิกถอนเมื่อคลิกที่ข้อความ“ คลิกที่นี่เพื่อเปลี่ยนข้อความ innerHTML”เมื่อฟังก์ชันถูกเพิกถอนเมื่อคลิกฟังก์ชันจะถูกเรียกใช้งานซึ่งระบุว่า getElementById (“ ย่อหน้าที่ 1”) ซึ่งระบุองค์ประกอบที่มีรหัสเป็นตัวอย่างให้เลือก

นอกจากนี้เรายังมีฟังก์ชัน innerHTML ซึ่งหมายถึงหลังจากคลิกสิ่งที่จะต้องทำ ในตัวอย่างข้างต้นเป็นเพียง 'ย่อหน้าที่เปลี่ยนแปลง'

ด้านล่างนี้คือผลลัพธ์เริ่มต้นของโค้ดด้านบน

ด้านล่างนี้คือผลลัพธ์ที่เปลี่ยนแปลงหลังจากคลิก

HTML ภายในที่มีรายการเรียงลำดับหรือไม่เรียงลำดับ

ด้านล่างนี้เป็นตัวอย่างเพื่อแสดงการใช้ innerHTML กับรายการที่เรียงลำดับหรือไม่เรียงลำดับ

ตัวอย่าง:

 
 
สวัสดี
 
สวัสดีอีกครั้ง
 
 
คลิกปุ่มด้านล่างเพื่อรับเนื้อหาขององค์ประกอบ ul
ลองใช้ฟังก์ชัน helloFunction () {var x = document.getElementById ('myList'). innerHTML document.getElementById ('paragraph1'). innerHTML = x}

ที่นี่ innerHTML จะถูกเรียกโดยปุ่มที่กำหนดโดยชื่อ“ ลองเลย”

ผลลัพธ์เริ่มต้นของข้อความด้านบนคือ:

ผลลัพธ์หลังจากคลิกที่ปุ่ม การคลิกปุ่มไม่ได้นำไปสู่การโหลดหน้าเว็บซ้ำ แต่เกิดจากการใช้ innerHTML แทน

InnerHTML สำหรับการเปลี่ยน URL

ด้านล่างนี้เป็นอีกตัวอย่างหนึ่งที่แสดงการใช้ innerHTML สำหรับการเปลี่ยน URL เมื่อคลิกปุ่ม

ตัวอย่าง:

  Wikipedia เปลี่ยนฟังก์ชันลิงก์ myFunction () {document.getElementById ('myAnchor'). innerHTML = 'Google' document.getElementById ('myAnchor') href = 'https://www.google.com' document.getElementById ('myAnchor' ) .target = '_blank'}

ตัวอย่างข้างต้นให้ลิงก์ไปยังเว็บไซต์ Wikipedia แต่เมื่อคลิกปุ่มลิงก์จะเปลี่ยนเป็น Google

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

ตรวจสอบไฟล์ โดย Edureka การฝึกอบรมการรับรองการพัฒนาเว็บจะช่วยให้คุณเรียนรู้วิธีสร้างเว็บไซต์ที่น่าประทับใจโดยใช้ HTML5, CSS3, Twitter Bootstrap 3, jQuery และ Google API และปรับใช้กับ Amazon Simple Storage Service (S3)

มีคำถามสำหรับเรา? โปรดระบุไว้ในส่วนความคิดเห็นของ“ การต่อสตริงใน JavaScript” แล้วเราจะติดต่อกลับไป