如何為數組中的每個值創建一個 h1 元素？

Question

我在 JavaScript 中有一個數組，如下例所示。 我的問題是：單擊按鈕時，如何為數組的每個值創建一個 h1 元素？

 Names = [] function submit() { let inputValue = document.getElementById("name").value; Names.push(inputValue); let frame = document.getElementById("frame"); frame.innerHTML = `<div><h1>${Names}</h1></div>` }

 <button onclick="submit()">Submit</button> <input placeholder="name" id="name"> <div id="frame"></div>

如何創建包含數組中每個值的單獨 H1 元素？

Answer 1

你可以像下面那樣做，每次你想添加一個新的時清空frame innerHTML ，然后遍歷Names列表並使用document.createElement("h1")創建新的h1元素。 這里的關鍵是使用append()將創建的元素添加到所需的元素。

檢查以下：

 var Names = [] function submit() { let inputValue = document.getElementById("name").value; Names.push(inputValue); let frame = document.getElementById("frame"); frame.innerHTML = ""; Names.forEach(function(el, i) { let h1 = document.createElement("h1"); h1.innerHTML = Names[i]; frame.append(h1); }); }

 <button onclick="submit()">Submit</button> <input placeholder="name" id="name"> <div id="frame"></div>

另一種可能更好的方法是只使用append()添加新輸入，如下所示：

 var Names = [] function submit() { let inputValue = document.getElementById("name").value; Names.push(inputValue); let frame = document.getElementById("frame"); let h1 = document.createElement("h1"); h1.innerHTML = inputValue; frame.append(h1); }

 <button onclick="submit()">Submit</button> <input placeholder="name" id="name"> <div id="frame"></div>

Answer 2

我想你的意思是每當用戶輸入一個名字並按下提交..這個名字應該被添加到一個帶有 id 框架的列表中吧？

如果是，那么您只需要解決一個小問題：

 frame.innerHTML = `<div><h1>${Names}</h1></div>`

這行代碼導致了這個問題，您在舊名稱之上重寫了新名稱，您應該做的是：

框架 = 舊框架 + 新名稱

在代碼中：

 frame.innerHTML += `<div><h1>${Names}</h1></div>`

或者

 frame.innerHTML = frame.innerHTML+ `<div><h1>${Names}</h1></div>`

兩行代碼做同樣的事情，但寫法不同