jQuery append() not adding [duplicate]

Answer 1

Simple:

LIVE DEMO

Instead of objects, play with "strings" to set </ul><ul> where needed.

var arr = ['1','2','3','4','5','6','7','8','9','10','11','12','13','14'];

var str = "<ul class='new'>";
for(var i=0; i<arr.length;) { 
              str += "<li>"+ arr[i++] +"</li>" ;  
  if(i%3===0) str += "</ul><ul class='new'>"   ;
}
str += "</ul>" ;

$("#mylist").html( str );

Answer 2

$('</ul><ul>') isn't going to do what you think. It will try to create a DOM element, probably resulting in a <ul>.

You'll have to build each element you need and piece them together, or operate on the html as a string using .html(). I definitely recommend the first of these options.

Answer 3

First, it's important to note that appending is a much more computationally expensive operation than setting innerHTML on an element. Second, it's important to note that jQuery parses HTML strings (e.g. $('<ul />'); ) into DOM elements via document.createElement. In other words, it's not like concatenating a string; you cannot create partial elements.

What you want is to build an HTML string with raw string concatenation, then dump that into the DOM via innerHTML. For example:

var colHTML = [];
var numPerCol = Math.ceil(response.length/3);
var i=0;
$.each(response, function(key, value) {
    var curCol = Math.floor(i / numPerCol);
    if (i % numPerCol == 0)
        colHTML[curCol] = '';
    colHTML[curCol] += '<li>' + value.nombre + '</li>'; // if nombre has invalid HTML, you need to escape it
});

var html = '<ul class="new">' + colHTML.join('</ul><ul class="new">') + '</ul>';
document.getElementById('mylist').innerHTML = html;