创建多个格结构动态

Question

使用jQuery用于创建动态的结构，

我试图解决一个问题，一个div ..

但是，我不知道为什么？我的div “内容” 直接关闭...

我的结果：

<li class="monde"> 
    <div class="content"> 
    </div>  // -----------> problem content div here 
    <div class="ctn_img"> 
     <img src="myimage.png" /> 
    </div> 
     <div class="choix"> 
      <input type="checkbox" class="checkbox" /> 
     </div> 
    <div class="infos"> 
     <span class="caption"> 
      <a href="#"><span class="stats">Etats</span></a> 
      <input type="text" class="name" /> 
      <span class="test">test</span> 
     </span> 
    </div> 
    // <-------------- better content close here... 
    <span class="glob">Global</span> 
</li> 

我demo here

Answer 1

那么你应该追加连班.ctn_img，.choix和.infos元素.content，而不是<li> ，即

// ... 
ctn_img = $('<div>').addClass('ctn_img').append(image).appendTo(content), 
choix = $('<div>').addClass('choix').html('<input ... />').appendTo(content), 
infos = $('<div>').addClass('infos').append(caption).appendTo(content), 
// ... 
result = $('<li>').addClass('monde').append(content, glob); 

DEMO：http://jsfiddle.net/nGRwJ/1/

Answer 2

var content = $('<div>').addClass('content'), 
    image  = $("<img>").attr('src', 'myimage.png'), 
    ctn_img = $('<div>').addClass('ctn_img').append(image), 
    choix  = $('<div>').addClass('choix').html('<input type="checkbox" class="checkbox" />'), 
    caption = $('<span>').addClass('caption').html('<a href="#"><span class="stats">Etats</span></a><input type="text" class="name"></span><span class="test">test</span>'), 
    infos  = $('<div>').addClass('infos').append(caption), 
    glob  = $('<span>').addClass('glob').html('Global'); 

    content.append(ctn_img).append(choix).append(infos).append(glob); 
    var result = $('<li>').addClass('monde').append(content); 

$(document.body).html(result); 

Answer 3

您当前的做法至少有两个缺点：

1. 真的很难保持结构（你面临这个问题）。
2. 太多append和DOM操作会降低性能。

怎么样建立HTML这样的：

var result = $([ 
    '<li class="monde">', 
     '<div class="content">', 
      '<div class="ctn_img">', 
       '<img src="myimage.png">', 
      '</div>', 
      '<div class="choix">', 
       '<input type="checkbox" class="checkbox">', 
      '</div>', 
      '<div class="infos">', 
       '<span class="caption">', 
        '<a href="#"><span class="stats">Etats</span></a>', 
        '<input type="text" class="name">', 
        '<span class="test">test</span>', 
       '</span>', 
      '</div>', 
     '</div>', 
     '<span class="glob">Global</span>', 
    '</li>' 
].join('')); 

$(document.body).html(result); 

更容易阅读。或考虑使用模板。

http://jsfiddle.net/baAUt/1/