วิธีเพิ่มมาร์กอัพภายในอิลีเมนต์ด้วย JavaScript

เรียนรู้วิธีเพิ่มอิลีเมนต์เข้าไปภายในอิลีเมนต์อื่นด้วย JavaScript

JavaScript มีพร็อพเพอร์ตี้ชื่อ innerHTML ทำให้การเพิ่มมาร์กอัพภายในอิลีเมนต์ที่มีอยู่เป็นเรื่องง่าย

สมมติว่าคุณมีส่วนหัวบทความพร้อมหัวข้อ และต้องการเพิ่มข้อความสำคัญด้านล่าง เช่น คำอธิบายหรือแท็กไลน์

HTML

<article> <header> <h1>Headline for your article</h1> </header> </article>

JavaScript

ตอนนี้มาเพิ่มมาร์กอัพ HTML สำหรับแท็กไลน์ทันทีหลังหัวข้อ h1

// Select h1 element inside the article element const articleHeadline = document.querySelector('article header') // Add content right after the h1 element articleHeadline.innerHTML += '<p>Extra content right below the headline.</p>'

ค่อนข้างน่าสนใจใช่ไหม?

ถ้าคุณต้องการเพิ่มเนื้อหาด้านบนหัวข้อ h1 แทนที่จะเป็นด้านล่าง?

ไม่เป็นไร คุณเพียงกำหนดเนื้อหาใหม่ให้ตัวแปร articleHeadline ก่อน แล้วค่อยเพิ่มเนื้อหาหัวข้อทีหลัง:

articleHeadline.innerHTML = '<p>Extra content right before the headline.</p>' + articleHeadline.innerHTML