Question

我尝试动态添加元素到this列表但未设法正确列出项目。

列表的示例如下：

<div class="mygrid-wrapper-div" id="wrapperEventList">
            <ul id="eventList" class="event-list">
                <li>
                    <time datetime="2014-07-20">
                        <span class="day">4</span>
                        <span class="month">Jul</span>
                        <span class="year">2014</span>
                        <span class="time">ALL DAY</span>
                    </time>
                    <img alt="Independence Day" src="https://farm4.staticflickr.com/3100/2693171833_3545fb852c_q.jpg" />
                    <div class="info">
                        <h2 class="title">Independence Day</h2>
                        <p class="desc">United States Holiday</p>
                    </div>
                </li>
                <li>
                    <time datetime="2014-07-20 0000">
                        <span class="day">8</span>
                        <span class="month">Jul</span>
                        <span class="year">2014</span>
                        <span class="time">12:00 AM</span>
                    </time>
                    <div class="info">
                        <h2 class="title">One Piece Unlimited World Red</h2>
                        <p class="desc">PS Vita</p>
                    </div>
                </li>


            </ul>
        </div>

对于测试我尝试编写将li元素添加到列表中的函数：

function populateEventList(items){
            items.forEach(function(item){
                console.log("items:\n" + item);
                var htmlToAppend = '<time datetime="2014-07-20 2000">\n \
                        <span class="day">20</span>\n \
                        <span class="month">Jan</span>\n \
                        <span class="year">2014</span>\n \
                        <span class="time">8:00 PM</span>\n \
                </time>\n \
                <img alt="My 24th Birthday!" src="https://farm5.staticflickr.com/4150/5045502202_1d867c8a41_q.jpg" />\n \
                        <div class="info">\n \
                        <h2 class="title">Mouse0270\'s 24th Birthday!</h2>\n \
                <p class="desc">Bar Hopping in Erie, Pa.</p>\n \
                </div>\n'
                console.log(htmlToAppend);
                //$("#eventList ul").append(htmlToAppend);
                $("#eventList ul").append(
                        $('<li>').append(htmlToAppend));
            });
        }

新添加的项目未正确列出（与现有项目相同）。我一直在寻找一些例子，并找到了类似问题的SO答案，但到目前为止还没有成功实现任何成功。

我将不胜感激。

Answer 1

以下是working JSFiddle，您应在li var中添加htmlToAppend元素，然后只需调用$("#eventList").append(htmlToAppend);即可。 li将附加到ul

JS：

function populateEventList(items) {
    items.forEach(function (item) {
        console.log("items:\n" + item);
        var htmlToAppend = '<li><time datetime="2014-07-20 2000">\n \
                        <span class="day">20</span>\n \
                        <span class="month">Jan</span>\n \
                        <span class="year">2014</span>\n \
                        <span class="time">8:00 PM</span>\n \
                </time>\n \
                <img alt="My 24th Birthday!" src="https://farm5.staticflickr.com/4150/5045502202_1d867c8a41_q.jpg" />\n \
                        <div class="info">\n \
                        <h2 class="title">Mouse0270\'s 24th Birthday!</h2>\n \
                <p class="desc">Bar Hopping in Erie, Pa.</p>\n \
                </div></li>\n'
        console.log(htmlToAppend);
        //$("#eventList ul").append(htmlToAppend);
        $("#eventList").append(htmlToAppend);
    });
}

populateEventList(['a', 'b']);

Answer 2

试试这个：

$("#eventList").append('<li>'+htmlToAppend+'</li>');

如何将自定义html作为子元素追加？

2 个答案: