วิธีเพิ่มมาร์กอัปภายในองค์ประกอบด้วย 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