แสดงรายการอาร์เรย์ใน Div Element เมื่อคลิกปุ่มด้วย Vanilla JavaScript

เพื่อ埋め込み (Embed) สมาชิกของอาร์เรย์ลงใน Div เราแค่วนลูปอาร์เรย์และ Append สมาชิกเข้าไปใน Div

ทำได้ดังนี้ −

ตัวอย่าง

const myArray = ["stone","paper","scissors"]; const embedElements = () => {    myArray.forEach(element => {       document.getElementById('result').innerHTML +=       `<div>${element}</div><br />`;       // result คือ id ของ div ใน DOM    }); };

โค้ดนี้สมมติว่า Div ที่จะแสดงมี id ‘result’

โค้ดเต็ม −

ตัวอย่าง

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body>    <div id="result"></div>    <button onclick="embedElements()">Show Data</button> <script> {    const myArray = ["stone","paper","scissors"];    function embedElements(){       myArray.forEach(el => {          document.getElementById('result').innerHTML +=`<div>${el}</div><br />`;          // result คือ id ของ div ใน DOM       });    }; } </script> </body> </html>

ผลลัพธ์

เมื่อคลิกปุ่ม “Show Data” จะเห็นดังนี้ −