为什么 append() 没有附加到 div 但它附加到标题 h2

Why is append() not attaching itself to a div but it is appending to the heading h2

在下面的代码中,为什么数组中的值没有附加到 div 元素,但我可以将它附加到标题?我将分号分隔的值存储在本地存储中,然后拆分每个项目并将其附加到 div.

<!DOCTYPE html>
<html>

<head>
    <title>To do</title>
    <style type="text/css">
    html {
        overflow-y: scroll;
    }
    body {
        padding: 0px;
        margin: 0px;
        font-family: Verdana, Geneva, sans-serif
    }
    h2 {
        color: black;
        text-align: center
    }
    #omnibox {
        margin-left: 400px;
        height: 30px;
        width: 500px;
        font-size: 14px;
        padding: 10px;
        position: center;
    }
    #searchWrapper {
        margin-left: 500px
    }
    /*#omnibox,#listWrapper{margin:20px;position:center}*/

    .searchable {
        color: white;
        display: block;
        padding: 10px;
        font-size: 16px;
        background: #4298E8;
        width: 300px;
        margin-bottom: 10px
    }
    .searchable:hover {
        background-color: #E8C420;
    }
    .delete {
        display: block;
        float: right;
        height: 20px;
        width: 20px;
        line-height: 20px;
        border-radius: 10px;
        background-color: black;
        color: white;
        text-align: center;
        font-size: 1em;
        transform: rotate(-45deg);
    }
    .delete:hover {
        background-color: #D8FFF1;
        color: red;
        cursor: pointer;
    }

    .comments {
        margin-left: -10px;
        margin-top: 10px;
        width: 310px;
        display: inline-block
    }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
    console.log('ready');
    $(function() {
        // body...
        $('#omnibox').focus();
        if (window.localStorage) {
            localStorage.setItem(1,"how do;you do");
            localStorage.setItem(2,"ok;got it");
            myList();
            function myList() {
                var list = "";
                console.log('Items in Local Storage = ' + localStorage.length);
                document.querySelector('h2').innerHTML = "To do -  " + localStorage.length;
                for (var i = localStorage.length - 1; i >= 0; i--) {
                    var itemKey = localStorage.key(i);
                    var values = new Array();
                    values = localStorage.getItem(itemKey);
                    values = values.split(";");
                    console.log("Array - " + values + " Items - " + values.length);
                    list += "<div class='searchable' id='" + itemKey + "'><span class='note'>" + itemKey + " " + values[0] + " </span><input type='text' class='comments' placeholder='Comments.'><br/></div>";
                    var myComments = ""
                    for (var j = values.length - 1; j >= 0; j--) {
                        console.log("Element - " + values[j] + " parentNode is " + itemKey);
                        myComments += '<span>' + ' ' + values[j] + ' ' + '</span>';
                    };
                    //Why doesn't this work?
                    $("#itemKey").append(myComments);
                    //This works though.
                    $("h2").append(myComments);
                }
                $("#listWrapper").html(list);
            }

            var todo = document.querySelector('#omnibox');
            $('#omnibox').keyup(function(e) {
                document.querySelector('.errorMessage').innerHTML = "";
                if (e.keyCode == 13) {
                    var todoVal = document.querySelector('#omnibox').value;
                    if (!todoVal.match(/\S/)) {
                        console.log('Empty value entered.');
                        document.querySelector('.errorMessage').innerHTML = "Enter something!";
                        return false;
                    } else {
                        console.log("Some value entered.");
                        $(this).trigger("enterKey");
                        var remember = new Array();
                        myNote = document.querySelector('#omnibox').value;
                        $('#omnibox').val("");
                        document.location.reload(true);
                        return true;
                    }
                }
            });
        }
    });
    </script>
</head>

<body>
    <h2></h2>
    <div id='searchWrapper'>
        <div id="listAddWrapper">
            <div id="empty"></div>
        </div>
        <div id="listWrapper">
        </div>
    </div>
</body>
</html>

在将元素添加到 DOM 之前,您不能使用选择器查找该元素。即使可以,您的选择器也是错误的——它应该是 "#" + itemKey。但这没关系,因为它无论如何都行不通;它将匹配的元素仍然只是您正在构建的 list 字符串的一部分。

查看您的代码,我认为最好的做法是在构建代码时将注释添加到文本中。

                list += "<div class='searchable' id='" + itemKey + "'><span class='note'>" + itemKey + " " + values[0] + " </span><input type='text' class='comments' placeholder='Comments.'><br/>";
                var myComments = ""
                for (var j = values.length - 1; j >= 0; j--) {
                    console.log("Element - " + values[j] + " parentNode is " + itemKey);
                    myComments += '<span>' + ' ' + values[j] + ' ' + '</span>';
                };
                list += myComments + "</div>";