Javascript 如何将自定义html附加为子元素？

我尝试向列表中动态添加元素，但未能正确列出项目

列表的示例如下所示：

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

4.
七月
2014
整天
独立日
美国假日



8.
七月
2014
上午12:00
一体式无限世界红
PS Vita

对于测试，我尝试编写将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));
            });
        }

函数populateEventList（项）{
items.forEach（功能（项目）{
console.log（“项：\n”+项）；
var htmlToAppend='\n\
20\n\
一月\n\
2014\n\
晚上8:00\n\
\n\
\n\
\n\
鼠标0270的24岁生日！\n\
宾夕法尼亚州伊利的酒吧跳酒吧\
\不
log（htmlToAppend）；
//$（“#事件列表ul”）.append（htmlToAppend）；
$（“#事件列表ul”）。追加(
$（“
”）.append（htmlToAppend））；
});
}

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

非常感谢您的帮助。

这里是一个示例，您应该在

htmlToAppend

var中添加

li

元素，然后只需调用

$（“#事件列表”）.append（htmlToAppend）。
li
将附加到
ul

JS:

函数populateEventList（项）{
items.forEach（功能（项目）{
console.log（“项：\n”+项）；
var htmlToAppend='
\n\
20\n\
一月\n\
2014\n\
晚上8:00\n\
\n\
\n\
\n\
鼠标0270的24岁生日！\n\
宾夕法尼亚州伊利的酒吧跳酒吧\
\n'
log（htmlToAppend）；
//$（“#事件列表ul”）.append（htmlToAppend）；
$（“#事件列表”）.append（htmlToAppend）；
});
}
人口清单（['a'，'b']）；
试试这个：


$（“#事件列表”）.append（“
”+htmlToAppend+”
）
$（“#eventList ul”）
在id为
eventList
的元素中选择一个无序的列表，而我非常确定您想要具有该id的ul。请改用
$（“ul#eventList”）
。另外，为什么不在
htmlToAppend
中包含
标记呢？
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']);