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

Question

I tried to dynamically add elements to this list but haven't managed to get the items listed correctly.

An example of list is the following:

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

For test I have tried to write the function that adds a li element to the list:

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

The newly added items are not listed correctly (the same way as existing ones). I have been looking around for examples and found some SO answers to similar problems but haven't managed to implement any successfully so far.

I would appreciate any help.

Answer 1

Here is a working JSFiddle , you should add the li element in the htmlToAppend var and then simply call $("#eventList").append(htmlToAppend); . The li will be appended to the 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>');