如何添加 <form > 動態標記到也動態創建的ul的li個項目

Question

一個JavaScript函數，可在其中使用<input>動態重復ul ：

function createEditableLi(ulId) {
    const ul = document.getElementById(ulId);
    const newLi = document.createElement("li");
    const newinput = document.createElement("input");
    newinput.setAttribute("class", "input_style");
    newinput.setAttribute("id", "textboxId");
    newinput.setAttribute("type", "text");
    newinput.setAttribute("name", "card_name");
    newLi.setAttribute("id", "editableLi");
    ul.appendChild(newLi);
    newLi.appendChild(newinput);
}

它創建HTML為

<li id="editableLi">
  <input name="card_name" type="text" id="textboxId" class="input_style" />
</li>

但我希望我的html可以像這樣用javascript

<form action="./card-controller-task-pending" method="POST">
  <li id="editableLi">
    <input name="card_name" type="text" id="textboxId" class="input_style" />
  </li>
</form>

Answer 1

我開始回答，但是@ADyson對此評論很好-這將是通用方法：

 function createEditableLi() { const container = document.getElementById('demo'); const newForm = document.createElement("form"); newForm.setAttribute("method", "post"); newForm.setAttribute("action", "URL"); // change this const newUl = document.createElement("ul"); const newLi = document.createElement("li"); newLi.setAttribute("id", "editableLi"); const newinput = document.createElement("input"); newinput.setAttribute("class", "input_style"); newinput.setAttribute("id", "textboxId"); newinput.setAttribute("type", "text"); newinput.setAttribute("name", "card_name"); newLi.appendChild(newinput); newUl.appendChild(newLi); newForm.appendChild(newUl); container.appendChild(newForm); } createEditableLi(); 

 <div id="demo"></div>