Preface

I just got acquainted with the basic operation of the DOM, holding a strong interest in the DOM, I delved into it myself, and wrote a small case, which can realize the similar addition function of the shopping cart.

Show results

Let's take a look at the effect first. The Insert picture description here
red area is our "commodity area" and the blue part below is the "shopping cart".
When we click the add button, the corresponding product will appear in the blue area.

Source code

html part

<body>
    <div class="commotity">
      <ul>
        <li>
          <a id="1">商品1</a>
          <button class="btn1">添加</button>
        </li>
        <li>
          <span id="2">商品2</span>
          <button class="btn1">添加</button>
        </li>
        <li>
          <span id="3">商品3</span>
          <button class="btn1">添加</button>
        </li>
      </ul>
    </div>
    <div class="cart">
      <ul></ul>
    </div>
  </body>

css part

* {
    
    
    margin: 0;
    padding: 0;
}

.commotity {
    
    
    background-color: brown;
    width: 100%;
    height: 400px;
}

ul,
li {
    
    
    text-decoration: none;
    text-align: center;
}

.cart {
    
    
    background-color: cyan;
    height: calc(100vh - 400px);
    width: 100%;
}

js code part

window.onload = function() {
    
    
  var idarr = [];
  var btn1 = document.getElementsByClassName("btn1");
  
  for (var i = 0; i < btn1.length; i++) {
    
    
    btn1[i].onclick = function (e) {
    
    
      var e = e || window.event; //兼容ie
      // console.log(e.target)
      var dom = e.target; //获取被点击的元素
      //去找到要操作的结点
      var predom2 = dom.previousElementSibling;
      var predom2_n = predom2.nodeName.toLowerCase();
      var a = document.createElement(predom2_n);
      a.innerHTML = predom2.innerHTML;
      var cart_ul = document.querySelector(".cart>ul");
      var oLI = document.createElement("li");
      oLI.appendChild(a);
      cart_ul.appendChild(oLI);
}

Ideas

The logic of the code is not complicated, to achieve such an effect.

First, we first get all button elements.
var btn1 = document.getElementsByClassName("btn1");
Then we use the for loop to add a click event to the button.
Get the clicked element first
var dom = e.target;
Then get the previous sibling node of the button, that is, the label where the product information is located.
var predom2 = dom.previousElementSibling;
After getting the product, we also need to get its label type, so that we can keep the structure consistent when we add it below.
var predom2_n = predom2.nodeName.toLowerCase();
Generate a label, corresponding to the label name of the product information. For example <a>商品1</a>, execute the following code, a is a pair of tags.
var a = document.createElement(predom2_n);
Then use innerHTML to get the content of the product and give it to the tag just created.
a.innerHTML = predom2.innerHTML;
Select <div class='cart'>the ul label.
var cart_ul = document.querySelector(".cart>ul");
Create li tags
var oLI = document.createElement("li");
Add the node to oLI.
oLI.appendChild(a);
Then add the oLI node to cart_ul.
cart_ul.appendChild(oLI);

It is stated that
this case is only an exercise for beginners, and there are still many operations that have not been implemented for shopping carts. For example, repeatedly adding products, you need to add a counter to count, delete shopping cart products, etc.

DOM operation small case-shopping cart add function

Preface

Show results

Source code

Ideas

Guess you like