「text()」メソッドで取り出した文字列を<li>で囲みたい

Question

> 解決したいこと

WordPressを利用して複数のチェックボックスのチェックを入れたら、チェックしたそれぞれの項目を別の場所に出力したいと思っています。

以下のコードで文字列は取得できたのですが、<li>タグなどで囲んで出力するにはどのようにすれば良いでしょうか？

<script>
$(function() {
  $('input[name="cat[]"]').change(function() {
    // 空の配列
    var cats = [];
    // チェックが入ったらループ処理
    $('input[name="cat[]"]:checked').each(function() {
      // 値を配列に格納
      cats.push($(this).parent('label').text());
    });
    // 配列を表示
    $('出力場所').text(cats);
  });
});
</script>

上記で出力できる内容

取得文字1,取得文字2,取得文字3

希望する出力形式

<li>取得文字1</li>
<li>取得文字2</li>
<li>取得文字3</li>

知識不足の為、htmlを組み合わせて出力する方法がわかりません。

どなたかご教授いただければ幸いです。

よろしくお願い致します。

Comments

[yambejp]

出力場所がulとかolという前提ですか？

Answer 1

  cat=["取得文字1","取得文字2","取得文字3"];
  $('ul').html(cat.map(x=>$('<li>').text(x)));