在下面的代码中，为什么数组中的值不追加到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>";
关于javascript - 为什么append()不将自身 append 到div，而是 append 到标题h2，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28570094/