Javascript 单击要添加到右侧框中的左侧项目

我在左侧的itemDrop上有一个项目列表，选中后，我想将其添加到右侧itemList的框中。条款：不能选择同一项，不能选择3项以上。只能编辑javascript文件，HTML文件不可触摸

HTML:

---

您可以通过标记选择器获取html中的列表，然后向第一个列表中添加一个单击事件侦听器，以便将child附加到第二个列表中

请看以下内容：

let lists=document.getElementsByTagNameul； 列表[0]。addEventListenerclick，函数{

---

ife.target&&e.target.nodeName==LI&&lists[1]。childElementCount这将符合您的条件。 条款：无法选择同一项，不能选择超过3项。只能编辑javascript文件

设计数器=0； 让selectedItem=[]； let drop=document.queryselectorietemlist ul； 让列表=document.querySelectorAllitemDrop ul li； 对于let i=0；i}但是，由于我的项目有不同的名称，例如abc、def、ghi……我如何实现代码，以便右侧框中显示的选定项目将是我从左侧选择的确切名称，而不是项目1、项目2等？我还添加了按钮，希望您能帮助使用ToUse remove方法，而不是Reset它确实清除了，但是一旦我选择了3，我就不能再添加任何项目，即使在我清除该框后也是如此

<div id="itemSelectHeader"> <H2>Item List</H2>
<div id="itemSelect">SELECT FROM HERE
<div id="itemDrop" class="itemSetup">
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
    <li>Item 6</li>
    <li>Item 7</li>
    <li>Item 8</li>
</ul>
</div>
</div>
</div>
<div id="itemListSection">
    <H3>Items Selected</H3>
    <div id="itemList" class="itemSetup"> <ul></ul></div>
</div>

    <div id="itemBtn">
         <button type="button" id="clearItem">CLEAR ALL</button>
         <button type="button" id="selectItem">SUBMIT</button>
    </div> 

    $("#clearItem").click(function(){
        //alert("try");
        $("#itemList").reset();
    });