我怎樣才能添加多個輸入到這個<div>使用 javascript function？</div><div id="text_translate"><p> 對於上下文，這是我正在開發的基於 Django 的應用程序。 我在 HTML 文檔中使用此腳本。 當按下按鈕時，它會運行以下 function。 目的是創建一個元素，然后包含幾個輸入等等。 我遇到的問題是，當我使用以下 append 語句向 div 添加一個輸入時，如果我嘗試添加另一個輸入類型（例如復選框），它會覆蓋第一個輸入（搜索）。 如何在腳本中進行 append 多個輸入？ 我總共需要 3 個不同的輸入。 </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> var counter = 1; //limits amount of transactions function addElements() { if (counter &lt; 5) //only allows 4 additional transactions { let div = document.createElement('div'); div.id = 'row' + counter; document.body.appendChild(div); let input = document.createElement('input'); input.id='search'+counter; input.type = 'search'; input.placeholder = 'Search by product name' div.appendChild(input); let button = document.createElement('button'); button.id ='button'+counter; button.type = 'QRscan'; button.innerText = 'QR scan' div.appendChild(button); } counter++ if (counter &gt;= 6) { alert("You have reached the maximum transactions.") } } addElements();</pre></div></div><p></p></div>

Question

對於上下文，這是我正在開發的基於 Django 的應用程序。 我在 HTML 文檔中使用此腳本。 當按下按鈕時，它會運行以下 function。 目的是創建一個元素，然后包含幾個輸入等等。 我遇到的問題是，當我使用以下 append 語句向 div 添加一個輸入時，如果我嘗試添加另一個輸入類型（例如復選框），它會覆蓋第一個輸入（搜索）。 如何在腳本中進行 append 多個輸入？ 我總共需要 3 個不同的輸入。

 var counter = 1; //limits amount of transactions function addElements() { if (counter < 5) //only allows 4 additional transactions { let div = document.createElement('div'); div.id = 'row' + counter; document.body.appendChild(div); let input = document.createElement('input'); input.id='search'+counter; input.type = 'search'; input.placeholder = 'Search by product name' div.appendChild(input); let button = document.createElement('button'); button.id ='button'+counter; button.type = 'QRscan'; button.innerText = 'QR scan' div.appendChild(button); } counter++ if (counter >= 6) { alert("You have reached the maximum transactions.") } } addElements();

Answer 1

如果我理解正確，您只想將 append 另一個輸入到 div。 在這種情況下，您可以添加另一個具有不同變量名稱的輸入（此處為input1 ）並將 append 添加到 div。

 var counter = 1; //limits amount of transactions function addElements() { if (counter < 5) //only allows 4 additional transactions { let div = document.createElement('div'); div.id = 'row' + counter; document.body.appendChild(div); let input = document.createElement('input'); input.id='search'+counter; input.type = 'search'; input.placeholder = 'Search by product name' div.appendChild(input); let input1 = document.createElement('input'); input.id='checkbox'+counter; input.type = 'checkbox'; div.appendChild(input1); let button = document.createElement('button'); button.id ='button'+counter; button.type = 'QRscan'; button.innerText = 'QR scan' div.appendChild(button); } counter++ if (counter >= 6) { alert("You have reached the maximum transactions.") } }

 <button onclick="addElements()"> Click me </button>