如何将列表项转换为输入元素？

Question

我有这个表单，我需要将列表项转换为输入，以便我可以通过 POST 提交它们。 我试图向每个列表项附加一个隐藏的输入。 这是我的代码：

 function add() { let ul = document.getElementById('basket-list'); let li = document.createElement('li'); let item = document.getElementById('code-input'); // Here I try to append an hidden input, but it's not working let input = document.createElement('input') input.setAttribute("type", "hidden"); input.setAttribute("name", "name"); input.setAttribute("value", "value"); //li.appendChild(document.createTextNode(input)); //item.appendChild(document.createElement('input')); ul.appendChild(li); console.log(ul); let lis = document.getElementById('basket-list').childNodes; let list = []; for( let i = 1; i < lis.length; i++ ){ let li = lis[i]; list.push(li.textContent); } console.log(list); }

 <form action=""> <ul id="basket-list"> </ul> <div class="basket-inputs"> <input type="text" class="code-input" id="code-input" name="code-input" placeholder="Código"> <button type="button" onclick="add()" ><i class="fas fa-check">Add</i></button> </div> </form>

Answer 1

出于测试目的，我使用了text元素而不是隐藏元素。

两件大事是，附加input和附加 item.value 的文本节点，以便您可以看到添加的文本。

li.appendChild(input);
li.appendChild(document.createTextNode(item.value));

 function add() { let ul = document.getElementById('basket-list'); let li = document.createElement('li'); let item = document.getElementById('code-input'); // Here I try to append an hidden input, but it's not working let input = document.createElement('input') input.setAttribute("type", "text"); input.setAttribute("name", "name"); input.setAttribute("value", item.value); li.appendChild(input); li.appendChild(document.createTextNode(item.value)); ul.appendChild(li); let lis = document.getElementById('basket-list').childNodes; let list = []; for( let i = 1; i < lis.length; i++ ){ let li = lis[i]; list.push(li.textContent); } console.log(list); }

 <form action=""> <ul id="basket-list"> </ul> <div class="basket-inputs"> <input type="text" class="code-input" id="code-input" name="code-input" placeholder="Código"> <button type="button" onclick="add()" ><i class="fas fa-check">Add</i></button> </div> </form>