Skip to main content

Featured Post

How to create customizable products in Shopify for Free (No coding!)

Creating customizable products in your Shopify store not only increase your customer satisfaction, it also increases your conversion rate.  Here is a method to add custom options for your Shopify product and convert it into personalized product - Go to Shopify store page and search for "Advanced Product Customizer" app or you can directly the the Shopify app page by clicking on this link Advanced Product Customizer . Install  Advanced Product Customizer  app for free in your Shopify store  From the application dashboard, enable to app embed block to complete the installation process Click "Product Custom Options"  From the Shopify products list, select the product on which you want to add custom options. Advanced Product Customizer  offers Image Swatch, Color Swatch, Text box, File Upload, Radio, Checkbox, Date Picker and more. Here is the a demo video for adding custom option for a Shopify product -

Get previous sibling HTML element using Javascript code

 Sometimes we requires in get previous sibling element in the HTML code and perform some operations in it like inserting any other element or get the innerHTML of previous element.

We can do this using 'previousElementSibling' property of JavaScript. Here is the sample HTML and JavaScript code for the same.


Get Previous Sibling HTML element :

<html>

  <body>

    <div id="firstDiv">      

    </div>

    <div id="SecondDiv">      

    </div>    

    <script>            

      //this line will return the first div

      let firstDivEle = document.getElementById("SecondDiv").previousElementSibling;      			    

    </script>

  </body>

  </html>
Here is the example to insert any element in the preivous sibling HTML element -
<html>
  <body>
    <div id="firstDiv">
      
    </div>
    <div id="SecondDiv">
      
    </div>
    
    <script>            
      //this code will get the first div and insert button in it 
      let firstDivEle = document.getElementById("SecondDiv").previousElementSibling; 
      let btnToAdd = document.createElement('BUTTON');                                        
	  btnToAdd.appendChild(document.createTextNode("Button")); 
      
      firstDivEle.insertBefore(btnToAdd, firstDivEle.firstChild);      
    </script>
  </body>
  </html>

Comments