[英]How to add a <form > tag dynamically to the li items of an ul that are also being created dynamically
一个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>
我开始回答,但是@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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.