比如有時候遇到下面這種情況，點選加入購物車，然後在上方的購物車中動態的新增商品以及商品的資訊，我們就可以通過JavaScript實現簡單的這些操作。

首先我們需要在html文件中，通過css對頁面的佈局做一些簡單的設定。並建立兩個模板，其display屬性設為隱藏。後面再通過克隆的方法往指定的位置新增元素。大致css樣式如下：

.buy {
            width: 200px;
            height: 300px;
            display: inline-block;
            border: 1px dashed grey;
            border-radius: 15px;
            text-align: center;
            margin: 0 20px;
            padding: 5px;
            box-sizing: border-box;
        }
 
        .buy img {
            width: 150px;
            height: 150px;
        }
 
        .buy:hover {
            border-color: red;
        }
 

上面是推薦商品中商品那個div的樣式

就上方這個例子來說，我們需要的模板可以像下方的程式碼所示：

 <tr class="model2" style="display: none;">
                <td>
                    <img src="img/img1.jpg">
                </td>
                <td>OPPO R15新品</td>
                <td>2999</td>
                <td>1</td>
                <td>2999</td>
                <td>
                    <a href="javascript:void(0)">刪除</a>
                </td>
            </tr>
 

上面的是新增到購物車裡面的元素的模板。

 <div class="model1" style="display: none;">
            <img src="img/img1.jpg">
            <div class="desc">OPPO R15新品</div>
            <div class="price">2999</div>
            <div class="pay">加入購物車</div>
        </div>

上面的是新增到推薦商品中的元素的模板。

在html和css都已經設定好了之後，我們就開始寫js程式碼，實現動態的新增和刪除。

首先我們先獲取所有商品的資訊，這個一般情況是從後臺資料庫那裡得到，今天這個是一個簡單的例子，我們就直接定義幾個商品。如下所示：

var products = [
            { img: "img/img1.jpg", desc: "OPPO R15新品", price: 2999 },
            { img: "img/img2.jpg", desc: "HUAWEI P20", price: 3788 },
            { img: "img/img3.jpg", desc: "HUAWEI P20 Pro", price: 4988 },
            { img: "img/img4.jpg", desc: "榮耀暢玩", price: 799 },
            { img: "img/img5.jpg", desc: "vivo Y69全網通", price: 1199 }
        ];

這是定義的這個商品是一個數組，所以我們可以用陣列的forEach（）方法，實現一下將資料新增到網頁之中。

 products.forEach(function (pro) {
            var copy = $(".model1")[0].cloneNode(true);//克隆模板
            // console.log(copy);
            copy.className = "buy";//改變克隆的模板的class類名
            copy.style.display = "inline-block";//將克隆的元素從隱藏轉換為顯示，因為可能有多個，所以我們將其轉換為行內塊
            var _children = copy.children;//獲取克隆元素的所有子節點，並重新賦值
            _children[0].src = pro.img;
            _children[1].innerHTML = pro.desc;
            _children[2].innerHTML = pro.price;
            $(".box")[0].appendChild(copy);//將克隆好的並做了修改的dom元素新增到指定位置。
 
 
        });

經過上面的程式碼之後，我們已經在網頁中動態的添加了一些元素資料。接下來就是實現新增購物車以及刪除的功能。

實現新增以及刪除的程式碼如下：

        var btns = $(".pay");//獲取所有需要新增功能的元素
        for (var i = 0, len = btns.length; i < len; i++) {
            btns[i].onclick = function () {
                var mes = this.parentNode.children;//獲取點選的那個元素的父節點的所有子節點，然後再分別獲取其中的值
                // console.log(mes);
                var img = mes[0].src,//獲取圖片的路徑
                    desc = mes[1].innerHTML,//獲取desc資訊
                    price = mes[2].innerHTML;//獲取價格資訊
                var copy = $(".model2")[0].cloneNode(true);//克隆模板
                // console.log(img, desc, price);
                copy.className = "";//修改類名
                copy.style.display = "table-row";//讓元素顯示
                var _child = copy.children;//給模板中的元素修改value值
                _child[0].firstElementChild.src = img;
                _child[1].innerHTML = desc;
                _child[2].innerHTML = price;
                _child[4].innerHTML = price*1;
                $(".carbox table")[0].appendChild(copy);//新增到指定位置
                copy.lastElementChild.firstElementChild.onclick = function () {//為刪除繫結點選事件
                    copy.parentNode.removeChild(copy);//點選刪除的時候，相當於刪除的新增的這一行
                }
            }
        }

更多內容請見原文，文章轉載自：https://blog.csdn.net/weixin_44519496/article/details/118541162