Tengo un div con id="inputs" en html y el siguiente código en js:
let paises=[ {pais: "Honduras",scripttag:`<script src="perro loco come baba"> 'cha cha'` }, {pais: "Chile",scripttag:"perropapa"}, {pais: "Madagascar",scripttag:"otro"} ] let inputDiv=document.getElementById("inputs") for(let p of paises){ if(p.scripttag){ inputDiv.innerHTML+=`<input disabled id="` + p.pais + `">` let inputPais=document.getElementById(p.pais) inputPais.value=p.scripttag } }Si el elemento de la matriz paises tiene una propiedad de etiqueta de secuencia de comandos, se crea una entrada y el valor se completa con contenido de etiqueta de secuencia de comandos.
Las entradas se crean correctamente, el problema es que en la página todas las entradas están vacías excepto la última creada (en este caso, la entrada con id Madagascar se llena con "otro")
Su problema es que no está creando un nuevo elemento cada vez que desea agregar una nueva entrada.
En lugar de agregar html a divs como ese, puede usar createElement .
let paises=[ {pais: "Honduras",scripttag:`<script src="perro loco come baba"> 'cha cha'` }, {pais: "Chile",scripttag:"perropapa"}, {pais: "Madagascar",scripttag:"otro"} ] let inputDiv=document.getElementById("inputs") for(let p of paises){ if(p.scripttag){ const newInput = document.createElement('input') newInput.id = p.pais newInput.value = p.scripttag inputDiv.appendChild(newInput) } }De esta manera, está agregando un nuevo elemento al div en cada bucle. En lugar de sobrescribir el elemento anterior. También creo que tiene más control sobre las propiedades de las entradas usando la manipulación DOM en lugar de escribir todo en una cadena y concatenar.
Otra opción es que podría establecer el valor con el HTML que está generando.
let paises=[ {pais: "Honduras",scripttag:`<script src='perro loco come baba'/> 'cha cha'` }, {pais: "Chile",scripttag:"perropapa"}, {pais: "Madagascar",scripttag:"otro"} ] let inputDiv=document.getElementById("inputs") for(let p of paises){ if(p.scripttag){ inputDiv.innerHTML+=`<input disabled id="${p.pais}" value="${p.scripttag}">` } } <div id='inputs'></div> let paises=[ {pais: "Honduras",scripttag:`<script src="perro loco come baba"> 'cha cha'` }, {pais: "Chile",scripttag:"perropapa"}, {pais: "Madagascar",scripttag:"otro"} ] let inputDiv=document.getElementById("inputs") for(let p of paises){ if(p.scripttag){ inputDiv.innerHTML= inputDiv.innerHTML +`<input disabled='true' id="` + p.pais + `" value='${p. scripttag}'/>` } } <div id="inputs"></div>