如何添加 <form > 动态标记到也动态创建的ul的li个项目

Question

A JavaScript function to repeat ul i dynamically with <input> inside it:

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

and it creates html as

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

but I want my html to be like this with 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

I started to answer but @ADyson comment it well, anyway - this would be the general approach:

 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>