比如有时候遇到下面这种情况，点击加入购物车，然后在上方的购物车中动态的添加商品以及商品的信息，我们就可以通过JavaScript实现简单的这些操作。
首先我们需要在html文档中，通过css对页面的布局做一些简单的设置。并创建两个模板，其display属性设为隐藏。后面再通过克隆的方法往指定的位置添加元素。大致css样式如下：
代码语言：javascript复制.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的样式
就上方这个例子来说，我们需要的模板可以像下方的代码所示：
代码语言：javascript复制 <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>上面的是添加到购物车里面的元素的模板。
代码语言：javascript复制 <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代码，实现动态的添加和删除。
首先我们先获取所有商品的信息，这个一般情况是从后台数据库那里得到，今天这个是一个简单的例子，我们就直接定义几个商品。如下所示：
代码语言：javascript复制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（）方法，实现一下将数据添加到网页之中。
代码语言：javascript复制 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元素添加到指定位置。
});经过上面的代码之后，我们已经在网页中动态的添加了一些元素数据。接下来就是实现添加购物车以及删除的功能。
实现添加以及删除的代码如下：
代码语言：javascript复制 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
