DOM 节点的自动添加

<div class="shang">
			<div class="shangzi1"><input type="checkbox" id="arrche" />全选</div>
			<div class="shangzi2">商品</div>
			<div class="shangzi3">商品参数</div>
			<div class="shangzi4">单价</div>
			<div class="shangzi5">数量</div>
			<div class="shangzi6">小计</div>
			<div class="shangzi7">操作</div>

		</div>
		<!--内容-->
		<div class="zhuti">
			<!--<div class="nierong"> 
	         <label > <input type="checkbox" >店铺:京东自营 </label>
		    <ul>
		  	<li> <input type="checkbox"  /> 
		  		<img src="https://img12.360buyimg.com/n7/jfs/t1/26719/27/1139/321364/5c0f7d2dE26654912/9d2b78523e1bada3.jpg" alt="" />
		  	<p class="zi1">三星 Galaxy A8s(SM-G8870) 黑瞳全视屏 6GB+128GB 外星银 全网通4G 双卡双待</p>
		  	<p class="zi2">规格:默认<br />尺寸:16*16*3(com)</p>
		  	<p class="zi3">¥2980</p>
		  	<div class="but">
		  	<input class="but1" type="button" value="-"/><input class="but2" type="number" /><input class="but1" type="button"  value="+" />
		  	</div>
		  	<p class="zi4"> ¥2980</p>
		  	<p class="zi5">移出商品</p>
		  	
		  	</li>
            </ul>-->
            </div>
              </div>
                   <!--底部-->
              <div class="dibu">
              <button>去结算</button >
              </div>
		     
		<script >

		function $(cl){
			return document.getElementsByClassName(cl)[0]
		}
		
		
			json.forEach(function (item,index){
				var oul=document.createElement("ul");
				item.goods.forEach(function(goods){ 
					
		oul.innerHTML+=`<li> <input type="checkbox" class="che"  /> 
		  		<img src="${goods.src}" alt="" />
		  	<p class="zi1">${goods.goodName}</p>
		  	<p class="zi2">规格:默认<br />尺寸:16*16*3(com)</p>
		  	<p class="zi3">¥${goods.price}</p>
		  	<div class="but">
		  	<input class="but1" type="button" value="-"/><input class="but2" type="number"value="1" /><input class="but1" type="button"  value="+" />
		  	</div>
		  	<p class="zi4"> ¥${goods.price}</p>
		  	<p class="zi5">移出商品</p>
		  	
		  	</li>
		  		`
			
					
				})
				$("zhuti").innerHTML+=`<div class="nierong"> 
	         <label > <input type="checkbox" class="Che" >店铺:${item.shopname } </label>
		    <ul>
		  	${oul.innerHTML}
            </ul>
            </div>
				`
				
			
			})
		</script>

猜你喜欢

转载自blog.csdn.net/weixin_44081699/article/details/85318358