javascript - 将输入字段附加到 li 元素的末尾。 jQuery

Question

假设我在输入字段中输入了一些内容，输入的任何内容都会与另一个输入字段一起附加到 ul 中。

我无法找到附加输入字段的方法。我的意思是，我尝试在 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").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>

Answer 1

您可以使用.append(li + input)来避免每次点击时append()到所有li

关于方向，也许您正在使用 css direction:rtl; 女巫会在左侧进行输入，或者您正在使用 float:left; 进行输入。

$("#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>