Получить значение флажка в виде неупорядоченного списка

Question

Я хочу установить значения флажка в виде списка unordered, который находится в ul li. Из моей функции значения печатаются как <ul><li>100</li></ul>. В этой функции я получаю значения, но не печатать в виде списка. Пожалуйста, помогите мне.

$(document).ready(function() {
  $("[name=coffee]").click(function() {
    myFunction();
  });

  function myFunction() {
    var total = "<ul>";
    $("[name=coffee]:checked").each(function() {
      total += "<li>" + $(this).val() + "</li>";
    });

    total += "</ul>";
    alert(total);
    $("#demo").text(total);

  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>How would you like your coffee?</p>
<p id="demo"></p>
<form name="myform" action="/action_page.php">
  <input type="checkbox" name="coffee" value="100">With cream<br>
  <input type="checkbox" name="coffee" value="150">With sugar<br>
  <input type="checkbox" name="coffee" value="200">With milk<br>
  <input type="checkbox" name="coffee" value="250">With tea<br>
  <br>

  <input type="text" id="order" size="50">
  <input type="submit" value="Submit">
</form>

Answer 1

Установите .html, а не .text элемента, чтобы то, что вы вставили, интерпретировалось как HTML разметка, а не как текст:

$("[name=coffee]").click(function() {
  var total = "<ul>";
  $("[name=coffee]:checked").each(function() {
    total += "<li>" + $(this).val() + "</li>";
  });
  total += "</ul>";
  $("#demo").html(total);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>How would you like your coffee?</p>
<p id="demo"></p>
<form name="myform" action="/action_page.php">
  <input type="checkbox" name="coffee" value="100">With cream<br>
  <input type="checkbox" name="coffee" value="150">With sugar<br>
  <input type="checkbox" name="coffee" value="200">With milk<br>
  <input type="checkbox" name="coffee" value="250">With tea<br>
  <br>

  <input type="text" id="order" size="50">
  <input type="submit" value="Submit">
</form>