เมธอด createElement

เมธอด createElement ช่วยให้สามารถสร้าง องค์ประกอบใหม่ได้ โดยการส่งชื่อแท็กเป็นพารามิเตอร์ หลังจากการสร้างแล้ว สามารถทำงานกับองค์ประกอบนั้นได้ เหมือนกับองค์ประกอบทั่วไป และยังสามารถเพิ่มลงในหน้าเว็บได้ ด้วยเมธอด prepend, append, appendChild, insertBefore หรือ insertAdjacentElement

หากบันทึกผลลัพธ์จากการทำงานของ createElement ลงในตัวแปร ตัวแปรนั้นจะเก็บองค์ประกอบดังกล่าว เหมือนกับว่าเราได้รับมันมา ผ่าน querySelector หรือ getElementById ข้อแตกต่างเพียงอย่างเดียวคือ องค์ประกอบของเราจะยังไม่ถูก วางบนหน้าเว็บ ส่วนอื่นๆ เราสามารถเปลี่ยน innerHTML แอตทริบิวต์ ผูกตัวจัดการเหตุการณ์ (event handlers) และในที่สุดก็วางมันบน หน้าเว็บได้

ไวยากรณ์

javascriptdocument.createElement('ชื่อแท็ก');

ตัวอย่าง

มาสร้างย่อหน้า ตั้งข้อความให้มัน และวางบนหน้าเว็บที่ส่วนท้ายของบล็อก #parent กัน:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

javascriptlet parent = document.querySelector('#parent');

let p = document.createElement('p');
p.textContent = '!';

parent.appendChild(p);

ผลลัพธ์จากการทำงานของโค้ด:

html<div id="parent">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>!</p>
</div>

ตัวอย่าง

มี ul มาใส่ 9 แท็ก li ลงไปในนั้นกัน โดยทำให้ข้อความของมันเป็นหมายเลขลำดับ:

html<ul id="parent"></ul>

javascriptlet parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
  let li = document.createElement('li');
  li.textContent = i;
  parent.appendChild(li);
}

ผลลัพธ์จากการทำงานของโค้ด:

html<ul id="parent">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
</ul>

ตัวอย่าง

มาเชื่อมตัวจัดการเหตุการณ์ (event handlers) กับองค์ประกอบขณะที่แทรกกัน:

html<ul id="parent"></ul>

javascriptlet parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
  let li = document.createElement('li');
  li.textContent = i;
  
  li.addEventListener('click', function() {
    alert(this.textContent);
  });
  
  parent.appendChild(li);
};

Результат:

ดูเพิ่มเติม