Estoy escribiendo un código que creará varios botones según la matriz dada a la función. Lo que hice es usar array.prototype.forEach para probar la función imprimiendo el contenido de la matriz en la consola. Cuando eso funcionó, traté de hacer algunos botones, pero los botones no aparecen en la página. He intentado agregar document.body.appendChild(element); pero todo lo que hizo fue darme errores. ¿Hay alguna manera de crear múltiples botones basados en una matriz de elementos usando array.protoype.forEach?
Este es mi código:
var array = ["bill", "harry", "john", "timothy"]; array.forEach(element => document.createElement(element) //I tried adding document.body.appendChild(element); here but kept giving me errors );El primer parámetro que pasa a document.createElement es una cadena que especifica el tipo de elemento que se creará. Otro problema en su código es que, si bien el cuerpo de su función es multilínea, no está usando {} . Puede lograr su objetivo de esta manera:
let array = ["bill", "harry", "john", "timothy"]; array.forEach(element=> { let btn = document.createElement('button'); btn.innerHTML = element; document.body.appendChild(btn); });Al usar forEach , debe prestar atención al uso de {} al escribir una expresión de varias líneas. En el ejemplo a continuación, cuando se carga la página, crea elementos <button> utilizando los datos en la matriz matriz. En esta solución, se crea un elemento <button> en cada ciclo forEach y se agrega al elemento <div> cuyo id de elemento secundario es container .
var container = document.getElementById('container'); var array = ["bill", "harry", "john", "timothy"]; let identifier = 0; array.forEach(element => { /* The new <button> element is created. */ var button = document.createElement("button"); /* The <button> element is assigned an "id". */ button.id = element; /* A text node is added to the new <button> element. */ var text = document.createTextNode(element); /* The text node is added to the <button>. */ button.appendChild(text); /* The created <button> element is bound to the container as a child node. */ container.appendChild(button); }); button{ display: block; width: 75px; margin-bottom: 5px; } /* The style created to verify that the id has been added to the created <button> element. */ #bill{ background-color: red; } <div id="container"> <!-- <button> elements are added to this field. --> </div>