jQuery append() not adding [duplicate]

问题:

This question already has answers here:

Closed 7 years ago.

Possible Duplicate:
Using .after() to add html closing and open tags

I want to show 3 columns lists (<ul>) with almost the same height, so I'm counting the <li> tags and use append to generate the list dynamically. But when I do $el.append($("</ul><ul class='new'>")) to close the current list and append a new one it appends like <ul class='new'></ul>.

I just want to close the <ul> tag and open it again. Is jQuery append() function validating somehow the DOM structure? How can I get the spected result? Any better way to achieve this?

HTML:

<div id="mylist">
   here the list will show
</div>

Jquery:

var $el = $("#mylist");
$el.empty(); // remove old options
$el.append($("<ul class='new'>"));
var j = parseInt(response.length/3);
var i = 0;
$.each(response, function(key, value) {
  i++;
  if(i%j==0){
      $el.append($("</ul><ul class='new'>")).append($("<li></li>").text(value.nombre));
  }
  else{
     $el.append($("<li></li>").text(value.name));
  }});

Expected result:

<div >
   <ul class="new">
     <li>Lorem Ipsum</li>
     <li>Lorem Ipsum</li>
     <li>Lorem Ipsum</li>
   </ul><ul class="new"> //This is what I want to append
     <li>Lorem Ipsum</li>
     <li>Lorem Ipsum</li>
     <li>Lorem Ipsum</li>
   </ul><ul class="new">
     <li>Lorem Ipsum</li>
     <li>Lorem Ipsum</li>
   </ul>
</div>

What I got:

<div id="mylist">
<ul class="new"></ul>
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
 <ul class="new"></ul>
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
 <ul class="new"></ul> 
 <li>Lorem Ipsum</li>
 <li>Lorem Ipsum</li>
</div>

回答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 );

回答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.

回答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;