Как добавить элемент li, а затем дочерний элемент div с текстом?

Question

Я опускаю HTML, потому что это довольно простой сегмент кода. Я беру ввод из текстового поля и добавляю его в список. По стилю я хотел бы поместить этот текст в div внутри li, но у меня возникают проблемы с выяснением, как заставить это работать.

Мой код:

    var task = $("#new_task").val();
    if (task !== "") {
      var elem = $("<li class='task'></li>").text(task);
      $(elem).append("<button class='remove'>X</button>");
      $("#list").append(elem);
      $("#new_task").val("");
    }

Мой попытка решения:

    var task = $("#new_task").val();
    if (task !== "") {
      var elem = $("<li class='task'></li>");
      $(elem).append("<div></div>").text(task);
      $(elem).append("<button class='remove'>X</button>");
      $("#list").append(elem);
      $("#new_task").val("");
    }

Следующая строка правильно добавляет div, но как только я делаю .text (), div даже не появляется в HTML:

$(elem).append("<div></div>");

Answer 1

Вы можете легко добавить тег <div> к тексту, используя:

$(elem).append($('<div/>', { text: task }));

$('#add').click(function() {
  var task = $("#new_task").val();
  if (task !== "") {
    var elem = $("<li class='task'></li>");
    $(elem).append($('<div/>', { text: task }));
    $(elem).append("<button class='remove'>X</button>");
    $("#list").append(elem);
    $("#new_task").val("");
  }
});

li > div {background-color:skyblue;padding:4px 8px;margin:5px 0;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="new_task" /><br>
<button id="add">Add</button>
<ul id="list"></ul>