javascript - 该按钮不是通过 TEXT 方法中的变量添加的

Question

我正在做一份任务表。我将项目与删除按钮一起动态添加到列表中，但该按钮未显示。为什么？我当然可以以不同的方式编写代码，但为什么这段代码不起作用？

$(function() { 
  
  $("#button").click(function() { 
    var text = $("#text").val(); 
    if(text != "")
    {
      var del = $("<input type='button' value='X'></input>").text();
      //var item = $("<li></li>").text(text + del);  
      var item = $("<li></li>").text(text + del); // DONT WORK! WHY?
      $("ul").append(item);
    }
    
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  Введите текст: 
  <input id="text" type="text"></input>
  <input id="button" type="submit"></input>
</div>
<div class="ul">
  <ul>
  </ul>
</div>

通过这段代码我想达到这个结果。但是我不能。谁来帮我解释一下我哪里错了？

<li>Some Text <input type='button' value='X'></input></li>

Answer 1

在您的代码中$("<input type='button' value='X'></input>").text()返回undefined 。

试试这个:

   $(function() { 

      $("#button").click(function() { 
        var text = $("#text").val(); 
        if(text != "")
        {
          var delHTML = "<input type='button' value='X'></input>";

          var item = $("<li></li>").html(text + delHTML); 
          $("ul").append(item);
        }

      });

    });