javascript - 动态创建多个div结构

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>

我的演示在这里

Answer 1

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 2

然后你应该将元素附加到类.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);

演示：http: //jsfiddle.net/nGRwJ/1/

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/