CODEWITHSUNDEEP
javascriptjquery
relentless-coder
relentless-coder

Reputation: 1546

Append an input field to the end of an li element. jQuery

let's say I enter something into an input field, whatever is typed gets appended to a ul along with another input field.

I can't figure out a way to append the input field. I mean, what I tried added an input at the beginning of the li and adds it over and over again.

$("#add").on("click", function() {

		var i = $("#task").val();
		var time = document.createElement("input");
		time.setAttribute("type", "text");
		$("#task").val("");
		$("ul").append("<li><span>X</span> " + i + " " + "</li>");
		$("ul li").append(time);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input">
		<input type="text" id="task" name="todo" placeholder="Your task">
		<button id="add">Add It</button>
	</div>

	<div id="after"></div>
	
	<ul>
		<li><span>X</span> Code ToDo</li>
		<li><span>X</span> Read two books</li>
		<li><span>X</span> Run</li>		
	</ul>

Upvotes: 0

Views: 1845

Answers (2)

Mamdouh Saeed
Mamdouh Saeed

Reputation: 2324

You can use .append(li + input) to avoid append() to all li on each click

about direction maybe you are using css direction:rtl; witch will make input in left side or you are using float:left; with inputs.

$("#add").on("click", function() {
  var i = $("#task").val();
  $("#task").val("");
  $("ul").append("<li><span>X</span> " + i + " " + " <input type='text' /></li>");

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="input">
  <input type="text" id="task" name="todo" placeholder="Your task">
  <button id="add">Add It</button>
</div>

<div id="after"></div>

<ul>
  <li><span>X</span> Code ToDo</li>
  <li><span>X</span> Read two books</li>
  <li><span>X</span> Run</li>
</ul>

Upvotes: 2

jbarradas
jbarradas

Reputation: 2161

You want the input only in the value you added? If so:

$("#add").on("click", function() {

        var i = $("#task").val();
        var time = document.createElement("input");
        time.setAttribute("type", "text");
        $("#task").val("");
        $("ul").append("<li><span>X</span> " + i + " " + "</li>").append(time); // just moved ".append(time)" to this line
})

If you want the input only in the last li:

$("#add").on("click", function() {

        var i = $("#task").val();
        var time = document.createElement("input");
        time.setAttribute("type", "text");
        $("#task").val("");
        $("ul").append("<li><span>X</span> " + i + " " + "</li>");
        $("ul li:last").append(time);
})

Upvotes: 0

Related Questions