Question

我有这个div：

<div id="cmplList" data-date="09/2017"></div>

这个方法：

function test(data) {       

            jQuery.each(data, function(index, value){
              $('#cmplList').append($("ul").append($("<li>").text()));
        });
}

data变量是字符串数组。

我尝试创建ul li元素并将其附加到div。但是，似乎我做错了，不知道我在上面的代码中做错了什么？

Answer 1

您应该将ul DOM 元素添加到div函数之外的each。

另一方面，您必须先创建ul，然后append创建 div 。

<div id="cmplList" data-date="09/2017"></div>
function test(data) {
    var ul=$("<ul>");
    $.each(data, function(index, value){
          ul.append($("<li>").text(value));
    });
    $('#cmplList').append(ul);
}

简短的例子：

var data = ['1','2'];
function test(data) {
        var ul=$("<ul>");
        $.each(data, function(index, value){
              ul.append($("<li>").text(value));
        });
        $('#cmplList').append(ul);
}
test(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cmplList" data-date="09/2017"></div>

Answer 2

您必须创建UL，然后创建LI，并设置LI的文本，然后将其全部附加到DIV

function test(data) {

  var ul = $('<ul />');

  jQuery.each(data, function(index, value) {
    ul.append( $('<li />', {text: value}) );
  });

  $('#cmplList').append( ul );
}

var data = ['test','test2'];

test(data);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="cmplList" data-date="09/2017"></div>

Answer 3

像这样：

function test(data) {

        var ul = $('<ul />');

        jQuery.each(data, function(index, value){
             ul.append( $('<li />', {text : value}) );
        });

        $('#cmplList').append(ul); 
    }

Answer 4

您需要创建ul并将li附加到其中，然后将创建的ul附加到div。

var data = ["a", "b", "c"];
// create ul
var ul = $("<ul></ul>");

$.each(data, function(i, value){
  // creating list item and appending it to the ul
  var li = $("<li>" + value + "</li>");
  ul.append(li);
});
// appending the ul to div
$("#cmplList").append(ul);

Answer 5

香草版

var data = ['A','B','C']

var ul = document.createElement('ul');

data.forEach(function(str){
   ul.innerHTML += '<li>'+str+'</li>'
}

document.querySelector('#cmplList').appendChild(ul);

或该问题的一个班轮

document.querySelector('#cmplList').innerHTML = '<ul><li>'+['A','B','C'].join('</li><li>')+'</li></ul>';

与jquery相同的一个班轮

$('#cmplList')[0].innerHTML = '<ul><li>'+['A','B','C'].join('</li><li>')+'</li></ul>';

如何将字符串列表附加到div？

5 个答案:

香草版