javascript - 使用 jQuery 将新的 div 容器添加到 div 容器 ID

标签 javascript html jquery

将丢失的 div 容器嵌入到 html 中会很容易......如果我只能添加它的话。我仅限于“jimdo”的头部区域来操纵类和 id。代码已经写好了,但在我看来唯一可行的方法是使用 jQuery 或 Javascript 来实现?

所以,我这里有这段代码:

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

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

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

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

以及 html 中缺少的 div 容器 <div class="margin">需要位于顶部第一个 div 容器 <div id="1" class="2"> 下按其 ID 添加 #1然后将下面的其余代码包含到新添加的 <div class="margin">

像这样:

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

  <div class="margin">

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

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

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

是否可以使用 jQuery 或 javascript 添加它?如果是这样,也许有人可以告诉我如何实现这个?

我真正的问题代码如下所示:

<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>

最佳答案

jQuery .wrapAll应该做你想做的事:

$(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>

关于javascript - 使用 jQuery 将新的 div 容器添加到 div 容器 ID,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62481267/

相关文章:

javascript - 在 ASP.net MVC2 中创建动态 javascript 的正确方法是什么?

html - div 标签内的填充导致改变高度 div

javascript - 单击链接时 AJAX 请求是否被终止?

javascript - jQuery 相当于 getElementbyName 不起作用

javascript - 从 AngularJS 上传文件到 Laravel

javascript - 输入从日期和截止日期时,在 JavaScript 中计算年月日期间

javascript - 初学者对 Express 和 socket.io 中的模块结构感到困惑

javascript - jquery变量成瘾问题

javascript - 隐藏的 <div> 中的动画背景图像不会加载或加载不是动画

javascript - Bootstrap 表跟随 div 内的滚动