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

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

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

Answer 3

您目前的方法至少有两个缺点：

很难维护结构（你遇到了这个问题）。
太多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/

动态创建多个div结构

3 个答案: