Elements Manipulate

Elements Manipulate

License

Synopsis

Move or copy a source element to a destination element with the action of after, append, before, prepend, or replace and other settings.

Version

• 0.14.0

SS Versions

• 7.1

• 7.0

Dependencies

• Squarespace plan that supports JavaScript.

---

Install

• CSS

  • v7.1

    • Add code from file elements manipulate.less to Website > Pages > Custom Code > Custom CSS.

  • v7.0

    • Add code from file elements manipulate.less to Website > Pages > Website Tools > Custom Code > Custom CSS.

  • Refer to Using the CSS Editor for details.

• Options

  • CDN Hosted

    Use this option for the quickest way to install this effect (files hosted externally on the jsDelivr, a CDN)

    • Options

      • Page Specific

        Use this option if you want to have this effect on only one Page.

        • Add code from file elements manipulate options.html to Page Settings > Advanced > Page Header Code Injection for the Page. Read the code for any instructions within.

        • Add the following code to Page Settings > Advanced > Page Header Code Injection for the Page.

          <!-- begin TWC Elements Manipulate -->
          
            <!-- License < https://github.com/tomsWebConsulting/twcsl/blob/main/LICENSE.txt#L1 > -->
            
            <script src="https://cdn.jsdelivr.net/gh/tomsWebConsulting/twcsl@b1b9c4ec88225c95a5a25b57810226a576b3c8f4/Element/Elements%20Manipulate/elements%20manipulate.min.js" type="module"></script>
            
            <!-- end TWC Elements Manipulate -->
            

        • Refer to per-page code injection for details.

      • Site-wide

        Use this option if you want to have this effect on all Store pages.

        • v7.1

          • Add code from file elements manipulate options.html to Website > Pages > Custom Code > Code Injection > FOOTER. Read the code for any instructions within.

          • Add the following code to Website > Pages > Custom Code > Code Injection > FOOTER.

            <!-- begin TWC Elements Manipulate -->
            
              <!-- License < https://github.com/tomsWebConsulting/twcsl/blob/main/LICENSE.txt#L1 > -->
              
              <script src="https://cdn.jsdelivr.net/gh/tomsWebConsulting/twcsl@b1b9c4ec88225c95a5a25b57810226a576b3c8f4/Element/Elements%20Manipulate/elements%20manipulate.min.js" type="module"></script>
              
              <!-- end TWC Elements Manipulate -->
              

        • v7.0

          • Add code from file elements manipulate options.html to Website > Pages > Website Tools > Custom Code > Code Injection > FOOTER. Read the code for any instructions within.

          • Add the following code to Website > Pages > Website Tools > Custom Code > Code Injection > FOOTER.

            <!-- begin TWC Elements Manipulate -->
            
              <!-- License < https://github.com/tomsWebConsulting/twcsl/blob/main/LICENSE.txt#L1 > -->
              
              <script src="https://cdn.jsdelivr.net/gh/tomsWebConsulting/twcsl@b1b9c4ec88225c95a5a25b57810226a576b3c8f4/Element/Elements%20Manipulate/elements%20manipulate.min.js" type="module"></script>
              
              <!-- end TWC Elements Manipulate -->
              

        • Refer to Add code to code injection for details.

  • On-site

    Use this option to install the full code of this effect (files hosted on your site).

    • Page Specific

      Use this option if you want to have this effect on only one Page.

      • Add code from file elements manipulate options.html to Page Settings > Advanced > Page Header Code Injection for the Page. Read the code for any instructions within.

      • Add code from file elements manipulate.html to Page Settings > Advanced > Page Header Code Injection for the Page.

      • Refer to per-page code injection for details.

    • Site-wide

      Use this option if you want to have this effect on all Pages.

      • v7.1

        • Add code from file elements manipulate options.html to Page Settings > Advanced > Page Header Code Injection for the Page. Read the code for any instructions within.

        • Add code from file elements manipulate.html to Website > Pages > Custom Code > Code Injection > FOOTER.

      • v7.0

        • Add code from file elements manipulate options.html to Website > Pages > Website Tools > Custom Code > Code Injection > FOOTER. Read the code for any instructions within.

        • Add code from file elements manipulate.html to Website > Pages > Website Tools > Custom Code > Code Injection > FOOTER.

      • Refer to Add code to code injection for details.

Options Data Structure Templates

• v7.1

  • Product Detail Page Last Page Section First N Blocks to End of Product Meta

  • Product Detail Page Last Page Section First Video Block Before Quantity

  • Product Detail Page Specific Video Block Before Quantity

Effects Dependent on Elements Manipulate

• v7.1

  • Blog Page Post Excerpt Element

  • Footer Sections Append to Page Observe

  • Store Page Detail Page Sections Append Footer Section

  • Store Page Detail Footer Section Append

Callbacks

You can optionally add callback functions to further customize the processing of the source element. Your callbacks must accept and return a node. Add your callbacks to Website > Pages > Custom Code > Code Injection > FOOTER. Refer to Add code to code injection. Order is not important.

• Log the source element.

  <script>
  
    ( ( ) => {
    
      const
      
        version = '0.1.0',
        
        s = `
        
          TWC EM Log v${ version }
          
          License < https://tinyurl.com/s872fb68 >
          
          © 2022-2026 Thomas Creedon
          
          Tom's Web Consulting < http://www.tomsWeb.consulting >
          
          `
          
          .replace ( /^\s+/gm, '' );
          
      console.log ( s );
      
      // initialize twc module
      
      window.twc = window.twc || { };
      
      // initialize twc em sub-module
      
      twc.em = twc.em || { };
      
      // initialize twc em callbacks sub-module
      
      twc.em.callbacks = ( ( self ) => {
      
        const callback = ( node ) => {
        
          console.log ( 'twcEmLog node', node );
          
          return node;
          
          };
          
        self [ 'twcEmLog' ] = callback;
        
        return self;
        
        } ) ( twc.em.callbacks || { } );
        
      } ) ( );
      
    </script>

• Remove the id attribute from the element.

  <script>
  
    ( ( ) => {
    
      const
      
        version = '0.1.0',
        
        s = `
        
          TWC EM Id Attribute Remove v${ version }
          
          License < https://tinyurl.com/s872fb68 >
          
          © 2022-2026 Thomas Creedon
          
          Tom's Web Consulting < http://www.tomsWeb.consulting >
          
          `
          
          .replace ( /^\s+/gm, '' );
          
      console.log ( s );
      
      // initialize twc module
      
      window.twc = window.twc || { };
      
      // initialize twc em sub-module
      
      twc.em = twc.em || { };
      
      // initialize twc em callbacks sub-module
      
      twc.em.callbacks = ( ( self ) => {
      
        const callback = ( node ) => {
        
          node.removeAttribute ( 'id' );
          
          return node;
          
          };
          
        self [ 'twcEmIdAttributeRemove' ] = callback;
        
        return self;
        
        } ) ( twc.em.callbacks || { } );
        
      } ) ( );
      
    </script>

Note

You can install elements manipulate options anywhere you can add an HTML script tag.

Make a Donation

Please consider making a donation.

Changes

• 2026-06-09

  • changed from domContentLoaded event to load to detect body.sqs-edit-mode
  • added code to restore moved footer elements when clicking the EDIT button
  • bumped version to 0.14.0

• 2026-05-29

  • updated options data structure templates to work with Squarespace removal of additional info in product editor
  • lifted functions to reduce nesting
  • bumped version to 0.13.0

• 2025-12-07

  • added feature to process source element through callbacks in a pipeline
  • bumped version to 0.12.0

• 2025-12-06

  • added onEditModeRemove flag
  • bumped version to 0.11.0

• 2025-10-08

  • fixed issue with not being able to work with head elements
  • bumped version to 0.10.1

• 2025-10-01

  • added product additional info first n blocks to end of product meta template
  • added repeat option
  • bumped version to 0.10.0

• 2025-07-30

  • changed options from json script tag to JavaScript object
  • removed dependency on jQuery
  • bumped version to 0.9.0

• 2024-10-29

  • use module pattern for adding callbacks
  • fixed for missing codeKey variable
  • bumped version to 0.8.0

• 2024-10-28

  • support for multiple callbacks
  • added source ancestor selector
  • bumped version to 0.7.0

• 2024-08-22

  • use a custom mime type for script tag type attribute
  • bumped version to 0.6.1

• 2024-08-22

  • support for callbacks
  • bumped version to 0.6.0

• 2024-05-10

  • added after and before options
  • support Bedford template family
  • bumped version to 0.5.0

• 2023-06-10

  • added source selector copy feature
  • bumped version to 0.4.0

• 2023-06-08

  • fixed syntax errors
  • bumped version to 0.3.1

• 2023-06-06

  • added a selector parent destination
  • bumped version to 0.3.0

• 2023-05-31

  • added ability to append and prepend to selector destination
  • bumped version to 0.2.0

• 2022-05-04

  • initial version