2

Would be very easy to embed the missing div container in the html ...if I only could add it. I'm limited to "jimdo's" head area to manipulate classes and id's from there. Code is already written but it seems to me the only way that works is to do that with jQuery or Javascript?

So, I have this code here: 

<div id="1" class="2">

  <div class="3"></div>

  <div class="4"></div>

  <div class="5"></div>
</div>

And the missing div container in the html <div class="margin"> needs to be under the first div container from top <div id="1" class="2"> added by its id #1 and then surrounds the rest code below into the new added <div class="margin">

Like this:

<div id="1" class="2">

  <div class="margin">

    <div class="3"></div>

    <div class="4"></div>

    <div class="5"></div>
  </div>
</div>

Is it possible to add it like that with jQuery or javascript? If so, maybe someone could show me how to implement this?

My real problem code looks like this:

<div id="cc-m-7032876518" class="j-module n j-hgrid ">    
//div class="margin" here

<div class="cc-m-hgrid-column" style="width: 23.5%;">
        <div id="cc-matrix-1776295218"><div id="cc-m-7032877318" class="j-module n j-htmlCode "><div class="button-wrapper" data-id="8">
    <div class="se-pre-con2" style="display: none;">
    </div>
    <img src="https://www.plextek.com/wp-content/uploads/default-placeholder-1024x1024-500x500-1.png" style="" class="-clipped"><img id="playSound8" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJDYXBhXzEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU2NS42NDggNTY1LjY0OCIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1NjUuNjQ4IDU2NS42NDgiIHdpZHRoPSI1MTIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMjE4NzAxIDAgMCAwLjIxODcwMSAyMjAuOTcgMjIwLjk3KSI+PHBhdGggZD0ibTI4Mi44MjQgMGMtMTU1Ljk0NyAwLTI4Mi44MjQgMTI2Ljg3Ny0yODIuODI0IDI4Mi44MjRzMTI2Ljg3NyAyODIuODI0IDI4Mi44MjQgMjgyLjgyNCAyODIuODI0LTEyNi44NzcgMjgyLjgyNC0yODIuODI0LTEyNi44NzctMjgyLjgyNC0yODIuODI0LTI4Mi44MjR6bS03MC43MDYgNDI0LjIzM3YtMjgyLjgyMmwyMTIuMTE4IDE0MS40MXoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6I0ZGRkZGRiIgZGF0YS1vbGRfY29sb3I9IiMwMDAwMDAiPjwvcGF0aD48L2c+IDwvc3ZnPg==" onmousedown="return false;" oncontextmenu="return false;" alt="play" title="play" class="pp-btn opcty" name="playSound8"><img id="stopSound8" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJDYXBhXzEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU2NS42NDggNTY1LjY0OCIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1NjUuNjQ4IDU2NS42NDgiIHdpZHRoPSI1MTIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMjE4NjkgMCAwIDAuMjE4NjkgMjIwLjk3MyAyMjAuOTczKSI+PHBhdGggZD0ibTI4Mi44MjQgMGMtMTU1Ljk0NyAwLTI4Mi44MjQgMTI2Ljg3Ny0yODIuODI0IDI4Mi44MjRzMTI2Ljg3NyAyODIuODI0IDI4Mi44MjQgMjgyLjgyNCAyODIuODI0LTEyNi44NzcgMjgyLjgyNC0yODIuODI0LTEyNi44NzctMjgyLjgyNC0yODIuODI0LTI4Mi44MjR6bS0zNS4zNTMgMzg4Ljg4M2gtNzAuNzA2di0yMTIuMTE4aDcwLjcwNnptMTQxLjQxMiAwaC03MC43MDZ2LTIxMi4xMThoNzAuNzA2eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojRkZGRkZGIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCI+PC9wYXRoPjwvZz4gPC9zdmc+" onmousedown="return false;" oncontextmenu="return false;" alt="pause" title="pause" class="pp-btn hide opcty" name="stopSound8">
</div>

<div class="sp-desc-text-padding">
    <p class="sp-desc-h1">
        LFo science
    </p>

    <p class="sp-desc-gear">
        Digitone, Digitone Keys
    </p>

    <p style="line-height: 10px;">
        &nbsp;
    </p>

    <p class="sp-desc-text">
        64 beautiful patches for Digitone an Digitone Keys
    </p>

    <div class="sp-desc-icp" style="">
        <ul>
            <li class="sp-info-btn-posi">
                <a href="#" class="expl-btn info-btn">Info</a>
            </li>

            <li class="sp-crd-btn-posi">
                <a href="https://payhip.com/b/WPGR" class="payhip-add-to-cart-button expl-btn crd-btn" data-theme="none" data-product="WPGR" data-initiated="true" target="_top">Card</a>
            </li>

            <li class="sp-price">
                <span>8.99€</span>
            </li>
        </ul>
    </div>

    <div class="sp-underline">
    </div>
</div></div></div>    </div>
            <div class="cc-m-hgrid-separator" data-display="cms-only"><div></div></div>
        <div class="cc-m-hgrid-column" style="width: 23.5%;">
        <div id="cc-matrix-1776295118"><div id="cc-m-7032877418" class="j-module n j-htmlCode "><div class="button-wrapper" data-id="">
    <div class="se-pre-con2" style="display: none;">
    </div>
    <img src="https://www.plextek.com/wp-content/uploads/default-placeholder-1024x1024-500x500-1.png" style="" class="-clipped"><img id="playSound" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJDYXBhXzEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU2NS42NDggNTY1LjY0OCIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1NjUuNjQ4IDU2NS42NDgiIHdpZHRoPSI1MTIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMjE4NzAxIDAgMCAwLjIxODcwMSAyMjAuOTcgMjIwLjk3KSI+PHBhdGggZD0ibTI4Mi44MjQgMGMtMTU1Ljk0NyAwLTI4Mi44MjQgMTI2Ljg3Ny0yODIuODI0IDI4Mi44MjRzMTI2Ljg3NyAyODIuODI0IDI4Mi44MjQgMjgyLjgyNCAyODIuODI0LTEyNi44NzcgMjgyLjgyNC0yODIuODI0LTEyNi44NzctMjgyLjgyNC0yODIuODI0LTI4Mi44MjR6bS03MC43MDYgNDI0LjIzM3YtMjgyLjgyMmwyMTIuMTE4IDE0MS40MXoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6I0ZGRkZGRiIgZGF0YS1vbGRfY29sb3I9IiMwMDAwMDAiPjwvcGF0aD48L2c+IDwvc3ZnPg==" onmousedown="return false;" oncontextmenu="return false;" alt="play" title="play" class="pp-btn opcty" name="playSound"><img id="stopSound" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJDYXBhXzEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU2NS42NDggNTY1LjY0OCIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1NjUuNjQ4IDU2NS42NDgiIHdpZHRoPSI1MTIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMjE4NjkgMCAwIDAuMjE4NjkgMjIwLjk3MyAyMjAuOTczKSI+PHBhdGggZD0ibTI4Mi44MjQgMGMtMTU1Ljk0NyAwLTI4Mi44MjQgMTI2Ljg3Ny0yODIuODI0IDI4Mi44MjRzMTI2Ljg3NyAyODIuODI0IDI4Mi44MjQgMjgyLjgyNCAyODIuODI0LTEyNi44NzcgMjgyLjgyNC0yODIuODI0LTEyNi44NzctMjgyLjgyNC0yODIuODI0LTI4Mi44MjR6bS0zNS4zNTMgMzg4Ljg4M2gtNzAuNzA2di0yMTIuMTE4aDcwLjcwNnptMTQxLjQxMiAwaC03MC43MDZ2LTIxMi4xMThoNzAuNzA2eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojRkZGRkZGIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCI+PC9wYXRoPjwvZz4gPC9zdmc+" onmousedown="return false;" oncontextmenu="return false;" alt="pause" title="pause" class="pp-btn hide opcty" name="stopSound">
</div>

<div class="sp-desc-text-padding">
    <p class="sp-desc-h1">
        Shapes
    </p>

    <p class="sp-desc-gear">
        Analog Four, Analog Keys (MKII)
    </p>

    <p style="line-height: 10px;">
        &nbsp;
    </p>

    <p class="sp-desc-text">
        Soundscapes, atmos and cinematic pads clashes with experimental sequences and mixed with playful leads and sfx to a sound pack that shows one new mutable side of the Analog Four MKII!.
    </p>

    <div class="sp-desc-icp" style="">
        <ul>
            <li class="sp-info-btn-posi">
                <a href="/sound-packs/shapes/" class="expl-btn info-btn lower-color">Info</a>
            </li>

            <li id="dwlnd-trg" class="sp-crd-btn-posi">
                <a href="https://payhip.com/b/WPGR" class="payhip-add-to-cart-button expl-btn crd-btn" data-theme="none" data-product="WPGR" data-initiated="true" target="_top">Card</a>
            </li>

            <li class="sp-price">
                <span class="hide-trg">8.99€</span> <img src="https://u.jimcdn.com/cms/o/s83f47c4a38d26e7e/userlayout/font/rolling-1-1s-200px.svg?t=1591287252" class="spin-pos dwlnd">
            </li>
        </ul>
    </div>

    <div class="sp-underline">
    </div>
</div></div></div>    </div>
            <div class="cc-m-hgrid-separator" data-display="cms-only"><div></div></div>
        <div class="cc-m-hgrid-column" style="width: 23.5%;">
        <div id="cc-matrix-1776294918"><div id="cc-m-7032877518" class="j-module n j-htmlCode "><div class="button-wrapper" data-id="2">
    <div class="se-pre-con2" style="display: none;">
    </div>
    <img src="https://www.plextek.com/wp-content/uploads/default-placeholder-1024x1024-500x500-1.png" style="" class="-clipped"><img id="playSound2" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJDYXBhXzEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU2NS42NDggNTY1LjY0OCIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1NjUuNjQ4IDU2NS42NDgiIHdpZHRoPSI1MTIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMjE4NzAxIDAgMCAwLjIxODcwMSAyMjAuOTcgMjIwLjk3KSI+PHBhdGggZD0ibTI4Mi44MjQgMGMtMTU1Ljk0NyAwLTI4Mi44MjQgMTI2Ljg3Ny0yODIuODI0IDI4Mi44MjRzMTI2Ljg3NyAyODIuODI0IDI4Mi44MjQgMjgyLjgyNCAyODIuODI0LTEyNi44NzcgMjgyLjgyNC0yODIuODI0LTEyNi44NzctMjgyLjgyNC0yODIuODI0LTI4Mi44MjR6bS03MC43MDYgNDI0LjIzM3YtMjgyLjgyMmwyMTIuMTE4IDE0MS40MXoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6I0ZGRkZGRiIgZGF0YS1vbGRfY29sb3I9IiMwMDAwMDAiPjwvcGF0aD48L2c+IDwvc3ZnPg==" onmousedown="return false;" oncontextmenu="return false;" alt="play" title="play" class="pp-btn opcty" name="playSound2"><img id="stopSound2" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJDYXBhXzEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU2NS42NDggNTY1LjY0OCIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1NjUuNjQ4IDU2NS42NDgiIHdpZHRoPSI1MTIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMjE4NjkgMCAwIDAuMjE4NjkgMjIwLjk3MyAyMjAuOTczKSI+PHBhdGggZD0ibTI4Mi44MjQgMGMtMTU1Ljk0NyAwLTI4Mi44MjQgMTI2Ljg3Ny0yODIuODI0IDI4Mi44MjRzMTI2Ljg3NyAyODIuODI0IDI4Mi44MjQgMjgyLjgyNCAyODIuODI0LTEyNi44NzcgMjgyLjgyNC0yODIuODI0LTEyNi44NzctMjgyLjgyNC0yODIuODI0LTI4Mi44MjR6bS0zNS4zNTMgMzg4Ljg4M2gtNzAuNzA2di0yMTIuMTE4aDcwLjcwNnptMTQxLjQxMiAwaC03MC43MDZ2LTIxMi4xMThoNzAuNzA2eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojRkZGRkZGIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCI+PC9wYXRoPjwvZz4gPC9zdmc+" onmousedown="return false;" oncontextmenu="return false;" alt="pause" title="pause" class="pp-btn hide opcty" name="stopSound2">
</div>

<div class="sp-desc-text-padding">
    <p class="sp-desc-h1">
        ROtf
    </p>

    <p class="sp-desc-gear">
        Analog Four, Analog Keys(MKII)
    </p>

    <p style="line-height: 10px;">
        &nbsp;
    </p>

    <p class="sp-desc-text">
        Take a break and get high on a mix of 64 breath-taking patches! Exclusive made for the Analog Keys/Four! It's also compatible to MKII user!
    </p>

    <div class="sp-desc-icp" style="">
        <ul>
            <li class="sp-info-btn-posi">
                <a href="/sound-packs/rotf/" class="expl-btn info-btn child">Info</a>
            </li>

            <li class="sp-crd-btn-posi">
                <a href="https://payhip.com/b/WPGR" class="payhip-add-to-cart-button expl-btn crd-btn" data-theme="none" data-product="WPGR" data-initiated="true" target="_top">Card</a>
            </li>

            <li class="sp-price">
                <span>8.99€</span>
            </li>
        </ul>
    </div>

    <div class="sp-underline">
    </div>
</div></div></div>    </div>
            <div class="cc-m-hgrid-separator" data-display="cms-only"><div></div></div>
        <div class="cc-m-hgrid-column last" style="width: 23.5%;">
        <div id="cc-matrix-1776295018"><div id="cc-m-7032877818" class="j-module n j-htmlCode "><div class="button-wrapper" data-id="6">
    <div class="se-pre-con2" style="display: none;">
    </div>
    <img src="https://www.plextek.com/wp-content/uploads/default-placeholder-1024x1024-500x500-1.png" style="" class="-clipped"><img id="playSound6" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJDYXBhXzEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU2NS42NDggNTY1LjY0OCIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1NjUuNjQ4IDU2NS42NDgiIHdpZHRoPSI1MTIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMjE4NzAxIDAgMCAwLjIxODcwMSAyMjAuOTcgMjIwLjk3KSI+PHBhdGggZD0ibTI4Mi44MjQgMGMtMTU1Ljk0NyAwLTI4Mi44MjQgMTI2Ljg3Ny0yODIuODI0IDI4Mi44MjRzMTI2Ljg3NyAyODIuODI0IDI4Mi44MjQgMjgyLjgyNCAyODIuODI0LTEyNi44NzcgMjgyLjgyNC0yODIuODI0LTEyNi44NzctMjgyLjgyNC0yODIuODI0LTI4Mi44MjR6bS03MC43MDYgNDI0LjIzM3YtMjgyLjgyMmwyMTIuMTE4IDE0MS40MXoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6I0ZGRkZGRiIgZGF0YS1vbGRfY29sb3I9IiMwMDAwMDAiPjwvcGF0aD48L2c+IDwvc3ZnPg==" onmousedown="return false;" oncontextmenu="return false;" alt="play" title="play" class="pp-btn opcty" name="playSound6"><img id="stopSound6" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJDYXBhXzEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU2NS42NDggNTY1LjY0OCIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1NjUuNjQ4IDU2NS42NDgiIHdpZHRoPSI1MTIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMjE4NjkgMCAwIDAuMjE4NjkgMjIwLjk3MyAyMjAuOTczKSI+PHBhdGggZD0ibTI4Mi44MjQgMGMtMTU1Ljk0NyAwLTI4Mi44MjQgMTI2Ljg3Ny0yODIuODI0IDI4Mi44MjRzMTI2Ljg3NyAyODIuODI0IDI4Mi44MjQgMjgyLjgyNCAyODIuODI0LTEyNi44NzcgMjgyLjgyNC0yODIuODI0LTEyNi44NzctMjgyLjgyNC0yODIuODI0LTI4Mi44MjR6bS0zNS4zNTMgMzg4Ljg4M2gtNzAuNzA2di0yMTIuMTE4aDcwLjcwNnptMTQxLjQxMiAwaC03MC43MDZ2LTIxMi4xMThoNzAuNzA2eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojRkZGRkZGIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCI+PC9wYXRoPjwvZz4gPC9zdmc+" onmousedown="return false;" oncontextmenu="return false;" alt="pause" title="pause" class="pp-btn hide opcty" name="stopSound6">
</div>

<div class="sp-desc-text-padding">
    <p class="sp-desc-h1">
        DCtf
    </p>

    <p class="sp-desc-gear">
        Analog Four, Analog Keys
    </p>

    <p style="line-height: 10px;">
        &nbsp;
    </p>

    <p class="sp-desc-text">
        Take a break and get high on a mix of 64 breath-taking patches! Exclusive made for the Analog Keys/Four! It's also compatible to MKII user!
    </p>

    <div class="sp-desc-icp" style="">
        <ul>
            <li class="sp-info-btn-posi">
                <a href="/sound-packs/dctf/" class="expl-btn info-btn child">Info</a>
            </li>

            <li class="sp-crd-btn-posi">
                <a href="https://payhip.com/b/WPGR" class="payhip-add-to-cart-button expl-btn crd-btn" data-theme="none" data-product="WPGR" data-initiated="true" target="_top">Card</a>
            </li>

            <li class="sp-price">
                <span>12.99€</span>
            </li>
        </ul>
    </div>

    <div class="sp-underline">
    </div>
</div></div></div>    </div>
    
<div class="cc-m-hgrid-overlay" data-display="cms-only"></div>

<br class="cc-clear">

</div>
user10688226
  • 79
  • 8

4 Answers4

2

jQuery .wrapAll should do what you want:

$(document).ready(function() {
  $('#cc-m-7032876518').children().wrapAll('<div class="margin">');
});
.margin {
  background-color: lightskyblue
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="cc-m-7032876518" class="j-module n j-hgrid ">
  //div class="margin" here

  <div class="cc-m-hgrid-column" style="width: 23.5%;">
    <div id="cc-matrix-1776295218">
      <div id="cc-m-7032877318" class="j-module n j-htmlCode ">
        <div class="button-wrapper" data-id="8">
          <div class="se-pre-con2" style="display: none;">
          </div>
          <img src="https://www.plextek.com/wp-content/uploads/default-placeholder-1024x1024-500x500-1.png" style="" class="-clipped"><img id="playSound8" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJDYXBhXzEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU2NS42NDggNTY1LjY0OCIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1NjUuNjQ4IDU2NS42NDgiIHdpZHRoPSI1MTIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMjE4NzAxIDAgMCAwLjIxODcwMSAyMjAuOTcgMjIwLjk3KSI+PHBhdGggZD0ibTI4Mi44MjQgMGMtMTU1Ljk0NyAwLTI4Mi44MjQgMTI2Ljg3Ny0yODIuODI0IDI4Mi44MjRzMTI2Ljg3NyAyODIuODI0IDI4Mi44MjQgMjgyLjgyNCAyODIuODI0LTEyNi44NzcgMjgyLjgyNC0yODIuODI0LTEyNi44NzctMjgyLjgyNC0yODIuODI0LTI4Mi44MjR6bS03MC43MDYgNDI0LjIzM3YtMjgyLjgyMmwyMTIuMTE4IDE0MS40MXoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6I0ZGRkZGRiIgZGF0YS1vbGRfY29sb3I9IiMwMDAwMDAiPjwvcGF0aD48L2c+IDwvc3ZnPg=="
            onmousedown="return false;" oncontextmenu="return false;" alt="play" title="play" class="pp-btn opcty" name="playSound8"><img id="stopSound8" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJDYXBhXzEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU2NS42NDggNTY1LjY0OCIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1NjUuNjQ4IDU2NS42NDgiIHdpZHRoPSI1MTIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMjE4NjkgMCAwIDAuMjE4NjkgMjIwLjk3MyAyMjAuOTczKSI+PHBhdGggZD0ibTI4Mi44MjQgMGMtMTU1Ljk0NyAwLTI4Mi44MjQgMTI2Ljg3Ny0yODIuODI0IDI4Mi44MjRzMTI2Ljg3NyAyODIuODI0IDI4Mi44MjQgMjgyLjgyNCAyODIuODI0LTEyNi44NzcgMjgyLjgyNC0yODIuODI0LTEyNi44NzctMjgyLjgyNC0yODIuODI0LTI4Mi44MjR6bS0zNS4zNTMgMzg4Ljg4M2gtNzAuNzA2di0yMTIuMTE4aDcwLjcwNnptMTQxLjQxMiAwaC03MC43MDZ2LTIxMi4xMThoNzAuNzA2eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojRkZGRkZGIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCI+PC9wYXRoPjwvZz4gPC9zdmc+"
            onmousedown="return false;" oncontextmenu="return false;" alt="pause" title="pause" class="pp-btn hide opcty" name="stopSound8">
        </div>

        <div class="sp-desc-text-padding">
          <p class="sp-desc-h1">
            LFo science
          </p>

          <p class="sp-desc-gear">
            Digitone, Digitone Keys
          </p>

          <p style="line-height: 10px;">
            &nbsp;
          </p>

          <p class="sp-desc-text">
            64 beautiful patches for Digitone an Digitone Keys
          </p>

          <div class="sp-desc-icp" style="">
            <ul>
              <li class="sp-info-btn-posi">
                <a href="#" class="expl-btn info-btn">Info</a>
              </li>

              <li class="sp-crd-btn-posi">
                <a href="https://payhip.com/b/WPGR" class="payhip-add-to-cart-button expl-btn crd-btn" data-theme="none" data-product="WPGR" data-initiated="true" target="_top">Card</a>
              </li>

              <li class="sp-price">
                <span>8.99€</span>
              </li>
            </ul>
          </div>

          <div class="sp-underline">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="cc-m-hgrid-separator" data-display="cms-only">
    <div></div>
  </div>
  <div class="cc-m-hgrid-column" style="width: 23.5%;">
    <div id="cc-matrix-1776295118">
      <div id="cc-m-7032877418" class="j-module n j-htmlCode ">
        <div class="button-wrapper" data-id="">
          <div class="se-pre-con2" style="display: none;">
          </div>
          <img src="https://www.plextek.com/wp-content/uploads/default-placeholder-1024x1024-500x500-1.png" style="" class="-clipped"><img id="playSound" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJDYXBhXzEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU2NS42NDggNTY1LjY0OCIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1NjUuNjQ4IDU2NS42NDgiIHdpZHRoPSI1MTIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMjE4NzAxIDAgMCAwLjIxODcwMSAyMjAuOTcgMjIwLjk3KSI+PHBhdGggZD0ibTI4Mi44MjQgMGMtMTU1Ljk0NyAwLTI4Mi44MjQgMTI2Ljg3Ny0yODIuODI0IDI4Mi44MjRzMTI2Ljg3NyAyODIuODI0IDI4Mi44MjQgMjgyLjgyNCAyODIuODI0LTEyNi44NzcgMjgyLjgyNC0yODIuODI0LTEyNi44NzctMjgyLjgyNC0yODIuODI0LTI4Mi44MjR6bS03MC43MDYgNDI0LjIzM3YtMjgyLjgyMmwyMTIuMTE4IDE0MS40MXoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6I0ZGRkZGRiIgZGF0YS1vbGRfY29sb3I9IiMwMDAwMDAiPjwvcGF0aD48L2c+IDwvc3ZnPg=="
            onmousedown="return false;" oncontextmenu="return false;" alt="play" title="play" class="pp-btn opcty" name="playSound"><img id="stopSound" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJDYXBhXzEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU2NS42NDggNTY1LjY0OCIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1NjUuNjQ4IDU2NS42NDgiIHdpZHRoPSI1MTIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMjE4NjkgMCAwIDAuMjE4NjkgMjIwLjk3MyAyMjAuOTczKSI+PHBhdGggZD0ibTI4Mi44MjQgMGMtMTU1Ljk0NyAwLTI4Mi44MjQgMTI2Ljg3Ny0yODIuODI0IDI4Mi44MjRzMTI2Ljg3NyAyODIuODI0IDI4Mi44MjQgMjgyLjgyNCAyODIuODI0LTEyNi44NzcgMjgyLjgyNC0yODIuODI0LTEyNi44NzctMjgyLjgyNC0yODIuODI0LTI4Mi44MjR6bS0zNS4zNTMgMzg4Ljg4M2gtNzAuNzA2di0yMTIuMTE4aDcwLjcwNnptMTQxLjQxMiAwaC03MC43MDZ2LTIxMi4xMThoNzAuNzA2eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojRkZGRkZGIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCI+PC9wYXRoPjwvZz4gPC9zdmc+"
            onmousedown="return false;" oncontextmenu="return false;" alt="pause" title="pause" class="pp-btn hide opcty" name="stopSound">
        </div>

        <div class="sp-desc-text-padding">
          <p class="sp-desc-h1">
            Shapes
          </p>

          <p class="sp-desc-gear">
            Analog Four, Analog Keys (MKII)
          </p>

          <p style="line-height: 10px;">
            &nbsp;
          </p>

          <p class="sp-desc-text">
            Soundscapes, atmos and cinematic pads clashes with experimental sequences and mixed with playful leads and sfx to a sound pack that shows one new mutable side of the Analog Four MKII!.
          </p>

          <div class="sp-desc-icp" style="">
            <ul>
              <li class="sp-info-btn-posi">
                <a href="/sound-packs/shapes/" class="expl-btn info-btn lower-color">Info</a>
              </li>

              <li id="dwlnd-trg" class="sp-crd-btn-posi">
                <a href="https://payhip.com/b/WPGR" class="payhip-add-to-cart-button expl-btn crd-btn" data-theme="none" data-product="WPGR" data-initiated="true" target="_top">Card</a>
              </li>

              <li class="sp-price">
                <span class="hide-trg">8.99€</span> <img src="https://u.jimcdn.com/cms/o/s83f47c4a38d26e7e/userlayout/font/rolling-1-1s-200px.svg?t=1591287252" class="spin-pos dwlnd">
              </li>
            </ul>
          </div>

          <div class="sp-underline">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="cc-m-hgrid-separator" data-display="cms-only">
    <div></div>
  </div>
  <div class="cc-m-hgrid-column" style="width: 23.5%;">
    <div id="cc-matrix-1776294918">
      <div id="cc-m-7032877518" class="j-module n j-htmlCode ">
        <div class="button-wrapper" data-id="2">
          <div class="se-pre-con2" style="display: none;">
          </div>
          <img src="https://www.plextek.com/wp-content/uploads/default-placeholder-1024x1024-500x500-1.png" style="" class="-clipped"><img id="playSound2" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJDYXBhXzEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU2NS42NDggNTY1LjY0OCIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1NjUuNjQ4IDU2NS42NDgiIHdpZHRoPSI1MTIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMjE4NzAxIDAgMCAwLjIxODcwMSAyMjAuOTcgMjIwLjk3KSI+PHBhdGggZD0ibTI4Mi44MjQgMGMtMTU1Ljk0NyAwLTI4Mi44MjQgMTI2Ljg3Ny0yODIuODI0IDI4Mi44MjRzMTI2Ljg3NyAyODIuODI0IDI4Mi44MjQgMjgyLjgyNCAyODIuODI0LTEyNi44NzcgMjgyLjgyNC0yODIuODI0LTEyNi44NzctMjgyLjgyNC0yODIuODI0LTI4Mi44MjR6bS03MC43MDYgNDI0LjIzM3YtMjgyLjgyMmwyMTIuMTE4IDE0MS40MXoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6I0ZGRkZGRiIgZGF0YS1vbGRfY29sb3I9IiMwMDAwMDAiPjwvcGF0aD48L2c+IDwvc3ZnPg=="
            onmousedown="return false;" oncontextmenu="return false;" alt="play" title="play" class="pp-btn opcty" name="playSound2"><img id="stopSound2" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJDYXBhXzEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU2NS42NDggNTY1LjY0OCIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1NjUuNjQ4IDU2NS42NDgiIHdpZHRoPSI1MTIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMjE4NjkgMCAwIDAuMjE4NjkgMjIwLjk3MyAyMjAuOTczKSI+PHBhdGggZD0ibTI4Mi44MjQgMGMtMTU1Ljk0NyAwLTI4Mi44MjQgMTI2Ljg3Ny0yODIuODI0IDI4Mi44MjRzMTI2Ljg3NyAyODIuODI0IDI4Mi44MjQgMjgyLjgyNCAyODIuODI0LTEyNi44NzcgMjgyLjgyNC0yODIuODI0LTEyNi44NzctMjgyLjgyNC0yODIuODI0LTI4Mi44MjR6bS0zNS4zNTMgMzg4Ljg4M2gtNzAuNzA2di0yMTIuMTE4aDcwLjcwNnptMTQxLjQxMiAwaC03MC43MDZ2LTIxMi4xMThoNzAuNzA2eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojRkZGRkZGIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCI+PC9wYXRoPjwvZz4gPC9zdmc+"
            onmousedown="return false;" oncontextmenu="return false;" alt="pause" title="pause" class="pp-btn hide opcty" name="stopSound2">
        </div>

        <div class="sp-desc-text-padding">
          <p class="sp-desc-h1">
            ROtf
          </p>

          <p class="sp-desc-gear">
            Analog Four, Analog Keys(MKII)
          </p>

          <p style="line-height: 10px;">
            &nbsp;
          </p>

          <p class="sp-desc-text">
            Take a break and get high on a mix of 64 breath-taking patches! Exclusive made for the Analog Keys/Four! It's also compatible to MKII user!
          </p>

          <div class="sp-desc-icp" style="">
            <ul>
              <li class="sp-info-btn-posi">
                <a href="/sound-packs/rotf/" class="expl-btn info-btn child">Info</a>
              </li>

              <li class="sp-crd-btn-posi">
                <a href="https://payhip.com/b/WPGR" class="payhip-add-to-cart-button expl-btn crd-btn" data-theme="none" data-product="WPGR" data-initiated="true" target="_top">Card</a>
              </li>

              <li class="sp-price">
                <span>8.99€</span>
              </li>
            </ul>
          </div>

          <div class="sp-underline">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="cc-m-hgrid-separator" data-display="cms-only">
    <div></div>
  </div>
  <div class="cc-m-hgrid-column last" style="width: 23.5%;">
    <div id="cc-matrix-1776295018">
      <div id="cc-m-7032877818" class="j-module n j-htmlCode ">
        <div class="button-wrapper" data-id="6">
          <div class="se-pre-con2" style="display: none;">
          </div>
          <img src="https://www.plextek.com/wp-content/uploads/default-placeholder-1024x1024-500x500-1.png" style="" class="-clipped"><img id="playSound6" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJDYXBhXzEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU2NS42NDggNTY1LjY0OCIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1NjUuNjQ4IDU2NS42NDgiIHdpZHRoPSI1MTIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMjE4NzAxIDAgMCAwLjIxODcwMSAyMjAuOTcgMjIwLjk3KSI+PHBhdGggZD0ibTI4Mi44MjQgMGMtMTU1Ljk0NyAwLTI4Mi44MjQgMTI2Ljg3Ny0yODIuODI0IDI4Mi44MjRzMTI2Ljg3NyAyODIuODI0IDI4Mi44MjQgMjgyLjgyNCAyODIuODI0LTEyNi44NzcgMjgyLjgyNC0yODIuODI0LTEyNi44NzctMjgyLjgyNC0yODIuODI0LTI4Mi44MjR6bS03MC43MDYgNDI0LjIzM3YtMjgyLjgyMmwyMTIuMTE4IDE0MS40MXoiIGRhdGEtb3JpZ2luYWw9IiMwMDAwMDAiIGNsYXNzPSJhY3RpdmUtcGF0aCIgc3R5bGU9ImZpbGw6I0ZGRkZGRiIgZGF0YS1vbGRfY29sb3I9IiMwMDAwMDAiPjwvcGF0aD48L2c+IDwvc3ZnPg=="
            onmousedown="return false;" oncontextmenu="return false;" alt="play" title="play" class="pp-btn opcty" name="playSound6"><img id="stopSound6" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGlkPSJDYXBhXzEiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDU2NS42NDggNTY1LjY0OCIgaGVpZ2h0PSI1MTIiIHZpZXdCb3g9IjAgMCA1NjUuNjQ4IDU2NS42NDgiIHdpZHRoPSI1MTIiPjxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMjE4NjkgMCAwIDAuMjE4NjkgMjIwLjk3MyAyMjAuOTczKSI+PHBhdGggZD0ibTI4Mi44MjQgMGMtMTU1Ljk0NyAwLTI4Mi44MjQgMTI2Ljg3Ny0yODIuODI0IDI4Mi44MjRzMTI2Ljg3NyAyODIuODI0IDI4Mi44MjQgMjgyLjgyNCAyODIuODI0LTEyNi44NzcgMjgyLjgyNC0yODIuODI0LTEyNi44NzctMjgyLjgyNC0yODIuODI0LTI4Mi44MjR6bS0zNS4zNTMgMzg4Ljg4M2gtNzAuNzA2di0yMTIuMTE4aDcwLjcwNnptMTQxLjQxMiAwaC03MC43MDZ2LTIxMi4xMThoNzAuNzA2eiIgZGF0YS1vcmlnaW5hbD0iIzAwMDAwMCIgY2xhc3M9ImFjdGl2ZS1wYXRoIiBzdHlsZT0iZmlsbDojRkZGRkZGIiBkYXRhLW9sZF9jb2xvcj0iIzAwMDAwMCI+PC9wYXRoPjwvZz4gPC9zdmc+"
            onmousedown="return false;" oncontextmenu="return false;" alt="pause" title="pause" class="pp-btn hide opcty" name="stopSound6">
        </div>

        <div class="sp-desc-text-padding">
          <p class="sp-desc-h1">
            DCtf
          </p>

          <p class="sp-desc-gear">
            Analog Four, Analog Keys
          </p>

          <p style="line-height: 10px;">
            &nbsp;
          </p>

          <p class="sp-desc-text">
            Take a break and get high on a mix of 64 breath-taking patches! Exclusive made for the Analog Keys/Four! It's also compatible to MKII user!
          </p>

          <div class="sp-desc-icp" style="">
            <ul>
              <li class="sp-info-btn-posi">
                <a href="/sound-packs/dctf/" class="expl-btn info-btn child">Info</a>
              </li>

              <li class="sp-crd-btn-posi">
                <a href="https://payhip.com/b/WPGR" class="payhip-add-to-cart-button expl-btn crd-btn" data-theme="none" data-product="WPGR" data-initiated="true" target="_top">Card</a>
              </li>

              <li class="sp-price">
                <span>12.99€</span>
              </li>
            </ul>
          </div>

          <div class="sp-underline">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="cc-m-hgrid-overlay" data-display="cms-only"></div>

  <br class="cc-clear">

</div>
Nick
  • 138,499
  • 22
  • 57
  • 95
  • I really don't know why this won't work for me! Seems simple but can't manage it... – user10688226 Jun 20 '20 at 04:36
  • @user10688226 although it's not necessary on SO snippets on your page you will need to wrap the jQuery code in a `$(document).ready()` function (see my edit). Are you doing that? – Nick Jun 20 '20 at 04:41
  • @user10688226 ah, it always turns out to be one of those simple things. I'm glad it's working. You should also upvote david's answer since he was on the right track. – Nick Jun 20 '20 at 04:49
  • would you like to help me with another problem I have here: [link](https://stackoverflow.com/questions/62314791/parallax-video-background-instead-of-image) – user10688226 Jun 22 '20 at 05:00
  • @user10688226 I'd love to but unfortunately I'm not familiar with parallax. Sorry, I hope you get some good answers. – Nick Jun 22 '20 at 05:01
1

Absolutely possible - there are good answers here; even showcasing examples with IE support Pure javascript method to wrap content in a div

<script>
    let org_html = document.getElementById("1").innerHTML;
    let new_html = "<div class='maargin'>" + org_html + "</div>";
    document.getElementById("1").innerHTML = new_html;
</script>
aleksandar
  • 186
  • 12
1

You can use the wrapAll function in jQuery. Doc link

<style> .margin { background: blue; }</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div id="1" class="2">

  <div class="3">3</div>

  <div class="4">4</div>

  <div class="5">5</div>
</div>

<script>
  $("#1").children().wrapAll("<div class=\"margin\"></div>");
</script>
davidhu
  • 9,523
  • 6
  • 32
  • 53
  • I'm sure this works fine but maybe my example code wasn't that exact.My real problem html code looks differen and to long to post it here. I try to edit my post, so you can see the real code ok? – user10688226 Jun 20 '20 at 03:56
  • @user10688226 this should work if you change `#1` to `#cc-m-7032876518` – Nick Jun 20 '20 at 04:10
  • yea, you just need to update the selector in `$('')`. Could be a class or id – davidhu Jun 20 '20 at 04:11
  • @davidhu unfortunately not :( I tried both, id and class, not doing anything. – user10688226 Jun 20 '20 at 04:16
1

I must start saying that using number for ID and classNames is wrong. According to W3C spec, Both attributes should start with a character, underscore or hyphen.

they cannot start with a digit, or a hyphen followed by a digit.

But truth is your browser will do its best effort to handle it and maybe it will go unnoticed (however, it might break when a customer visits the page)

(I just saw your real HTML has valid IDs and classNames, but my comment is still valid ;D)

That being said:

jQuery has some convenience methods to do exactly that, but basically you would create the "margin" container, get a reference to the outermost div's direct children, append them to the margin container, then append the latter to the original wrapper:

$('#wrap_with_div').on('click', () => {
  let wrapper = $('<div class="margin">'), //
    children = $('#id1 > div').each(function() {
      $(this).appendTo(margin);
    });


  wrapper.appendTo('#id1');
});

See it in action

$('#wrap_with_div').on('click', () => {
  const outerMost = $('#id1'),
    wrapper = $('<div>'),
    children = $('#id1 > div').each(function() {
      $(this).appendTo(wrapper);
    });

  wrapper.addClass('margin');
  outerMost.append(wrapper);
});
.child3,
.child4,
.child5 {
  width: 100px;
  height: 20px;
  padding: 8px;
  border: 1px solid #aaa;
  border-radius: 3px;
  float: left;
  margin: 10px;
}

#id1 {
  padding: 10px;
  border: 1px solid #369;
  float: left;
}

#wrap_with_div {
  display: block;
  clear: both;
}

.margin {
  border: 1px dashed green;
  float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="id1" class="container2">



  <div class="child3"></div>

  <div class="child4"></div>

  <div class="child5"></div>

</div>
<button id="wrap_with_div">Click to wrap inner containers</button>

however...

Why would you need jQuery for this? It's just a matter of creating a div, grabbing others, appending and appending again. Nowadays the DOM has concise ways to perform the same without including external libraries.

document.querySelector('#wrap_with_div').addEventListener('click', () => {
  const outermost = document.querySelector('#id1'),
    wrapper = document.createElement('div'),
    children = document.querySelectorAll('#id1 > div').forEach(child => {
      wrapper.appendChild(child);
    });
  wrapper.classList.add('margin');
  outermost.appendChild(wrapper);
});


document.querySelector("#wrap_with_div").addEventListener("click", () => {
  const outermost = document.querySelector("#id1"),
    wrapper = document.createElement("div"),
    children = document.querySelectorAll("#id1 > div").forEach(child => {
      wrapper.appendChild(child);
    });
  wrapper.classList.add("margin");
  outermost.appendChild(wrapper);
});
.child3,
.child4,
.child5 {
  width: 100px;
  height: 20px;
  padding: 8px;
  border: 1px solid #aaa;
  border-radius: 3px;
  float: left;
  margin: 10px;
}

#id1 {
  padding: 10px;
  border: 1px solid #369;
  float: left;
}

#wrap_with_div {
  display: block;
  clear: both;
}

.margin {
  border: 1px dashed green;
  float: left;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="id1" class="container2">



  <div class="child3"></div>

  <div class="child4"></div>

  <div class="child5"></div>

</div>
<button id="wrap_with_div">Click to wrap inner containers</button>
ffflabs
  • 17,166
  • 5
  • 51
  • 77
  • Ok thanks but where to put the id? There are a lot more div containers in the above div. I've updated my post, can you check it please? – user10688226 Jun 20 '20 at 04:20