我对JavaScript相当陌生，所以要寻找最简单的解决方案（也不要寻找jQuery解决方案）。
我正在尝试将单击的列表项添加到新列表中，仅当单击的列表项不在新列表中时。 我已设法将单击的列表项添加到新列表中，但未能创建一个正常运行的if语句，该语句检查新列表中的当前项。
null
window.onload = function () {
var ul = document.getElementById('bulk');
ul.addEventListener('click', function (e) {
var target = e.target;
while (target && target.parentNode !== ul) {
target = target.parentNode;
if(!target) { return; }
}
if (target.tagName === 'LI'){
var node = document.createElement("LI");
var textnode = document.createTextNode(target.id);
var textarea = document.getElementById("test1");
if (!textarea.querySelector(target.id)) {
node.appendChild(textnode);
document.getElementById("test1").appendChild(node);
}
}
});
}<!DOCTYPE html>
<html lang="en">
<head>
<script src="test.js"></script>
</head>
<body>
<ul id="bulk">
<li id="banana"><a href="#"><b>banana</b></a></li>
<li id="apple"><a href="#"><b>apple</b></a></li>
</ul>
<ul id="test1"></ul><br>
</body>
</html>null
由于在一个文档中不应该有多个具有相同ID的元素，所以我做了一些修改，使每个元素的唯一ID位于数据集属性data-id中。
除此之外，还需要使用QuerySelector()来确定这样的节点是否已经在目标列表中。
null
var ul = document.getElementById('bulk');
var destination = document.getElementById("test1");
ul.addEventListener('click', function(e) {
var target = e.target;
while (target && target.parentNode !== ul) {
target = target.parentNode;
if (!target) {
return;
}
}
if (target.tagName === 'LI') {
var id = target.dataset.id;
var node = document.createElement("LI");
node.dataset.id = id;
var textnode = document.createTextNode("element with id " + id);
if (destination.querySelector("[data-id=" + id + "]")) {
return;
}
node.appendChild(textnode);
destination.appendChild(node);
}
});<ul id="bulk">
<li data-id="banana"><a href="#"><b>banana</b></a></li>
<li data-id="apple"><a href="#"><b>apple</b></a></li>
</ul>
<hr />
<ul id="test1">
</ul>