Question

在下面的代码中，为什么数组中的值不会附加到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>

Answer 1

在将元素添加到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>";

为什么append（）不会将自身附加到div，而是附加到标题h2

1 个答案: