Js-循环遍历数组以创建仅填充最后一项输入值的输入和值

Question

我有一个id为"的div；输入"；在html上，在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
}
}

如果paises数组的元素具有scripttag属性，则会创建一个输入，并用scripttag内容填充值。

输入正确创建，问题是在页面中，除了最后一个创建的输入外，所有输入都是空的(在这种情况下，id为Madagascar的输入用"otro"填充(

Answer 1

您的问题是，并不是每次添加新输入时都创建一个新元素。

您可以使用createElement，而不是像那样向div添加html。

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)
}
}

通过这种方式，您可以在div的每个循环中添加一个新元素。而不是覆盖上一个元素。我还认为，使用DOM操作可以更好地控制输入属性，而不是将所有内容都写在字符串中并进行连接。

Answer 2

另一个选项是，您可以使用正在生成的HTML设置值。

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>

Answer 3

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>