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>
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.