个人中心
gpt4 book ai didi

javascript - 为什么append()没有将自身 append 到div，而是 append 到标题h2

转载 作者：行者123 更新时间：2023-12-03 10:46:01 25 4
gpt4 key购买 nike

在下面的代码中，为什么数组中的值没有 append 到 div 元素，但我可以将其 append 到标题？我将分号分隔的值存储在本地存储中，然后拆分每个项目并将其 append 到 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>";

关于javascript - 为什么append()没有将自身 append 到div，而是 append 到标题h2，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28570094/

25 4 0
文章推荐： javascript - HipChat 机器人 JS 正则表达式
文章推荐： javascript - Django for 循环列表与 jquery 和 javascript
文章推荐： javascript - $.post .done 回调未触发，但数据已发布到服务器
文章推荐： javascript - 如何使用 JavaScript 随机化有序列表
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com