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>

Answer 2

您希望仅在added的值中输入？如果是这样的话：

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

如果您只希望输入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);
})

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

2 个答案: