Javascript 将信息从一个div传输到另一个div的更简单方法

所以我在codepen上做这个项目。Javascript做了它在点击后应该做的事情，从按钮的父元素中获取一个带有产品名称类的项目并将其放入购物车下拉列表中，但是我想知道是否有更简单的方法来做同样的事情。我很难把产品的价格放到购物车的下拉列表中，我的意思是我可以把价格放进去，但要分开。下面是javascript

var itemsCart = document.getElementById('cart-drop');

function myFunc(){
  itemsCart.classList.toggle('show');
}

window.onclick = function(event) {
  if(!event.target.matches('.dropdown span') && 
!event.target.matches('.dropdown-toggle')){

    var hide = document.getElementsByClassName('cart-dropdown');
        if(hide[0].classList.contains('show')){
            hide[0].classList.remove('show');    
        }

}
}

function addToCardButtons(){

var addToCart = document.getElementsByClassName('add-to-cart');

for(var i = 0; i<addToCart.length; i++) {
    addToCart[i].addEventListener('click', function(){
        var parentNode = this.parentNode;
        findName(parentNode);

        var num = document.getElementById('number');
        var parsed = parseInt(num.innerHTML);

        if(parsed>=0){
            parsed++;
            num.classList.add('addedToCart');
            num.innerHTML = parsed;
        }

    })    
}
}
addToCardButtons();

function findName(parent){

var children = parent.childNodes;

for(var i = 0; i<children.length; i++){
    var child = children[i].classList;
    if(child && child.contains('product-name')){
        var productName = children[i].innerHTML;
        createItem(productName);
    }

}
}

function createItem(name) {
  var li = document.createElement('li');
  li.appendChild(document.createTextNode(name))
  itemsCart.append(li)
}

---

完整版本：

以下是简化的代码。希望这有帮助。我通过传递价格参数将产品价格添加到购物车下拉列表中

window.onload=函数{ window.onclick=函数事件{ 如果！event.target.matches'.下拉范围'&&！event.target.matches'.下拉切换' document.querySelector.cart下拉列表.classList.remove'show'； } 函数addToCardButtons{ var addToCart=document.querySelectorAll'.add to cart'； 对于变量i=0；i=0{ 添加'addedToCart'； num.innerHTML=++已解析； } } } } AddToCard按钮； 函数createItemname，price{ var li=document.createElement'li'； li.appendChilddocument.createTextNodename+-+价格 document.querySelector'cart-drop'.appendli； //删除添加任何产品时，您的购物车为空 [].filter.calldocument.querySelectorAll'cart-drop>li'，functionx{ 如果“您的购物车为空”的x.textContent.indexo>-1 x.remove； }; } } 主要{ 边缘顶部：20px； 边缘底部：20px； } 梅因街{ 边缘顶部：20px； 边缘底部：20px； } .文本{ 位置：绝对位置； 最高：50%； 转化率：转化率0%，-50%； 文本对齐：右对齐； 文本转换：大写； 颜色：fff； 宽度：60%； } .文本h1{ 字号：4em； 颜色：d88c00； } .产品包装{ 边缘顶部：30px； } .产品名称{ 边际上限：0； 颜色：ffa500； } .产品类型{ 保证金：0； 颜色：bbbbbb； } 1.产品价格{ 字号：600； 字号：1.5em； 颜色：424242； } .普莱斯{ 颜色：bbbbbb； 文字装饰：线条贯通； 字号：1em； 线高：20px； } .产品说明{ 边缘底部：20px； 边缘顶部：20px； } .测试{ 宽度：100%； 最小高度：350px； } .测试img{ 宽度：100%； } 切换导航 您的购物车： 0 你的车是空的 山地自行车 乱数假文 1200.00欧盟1680.00欧盟

最大库拉索酒店。我的名字是tristique nisl，但我是vehicula urna。维瓦摩斯 同侧大帆。前庭和终板

添加到购物车 公路自行车 同侧视野2 2000.00欧盟

最大库拉索酒店。我的名字是tristique nisl，但我是vehicula urna。维瓦摩斯 同侧大帆。前庭和终板

添加到购物车