将丢失的 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;">
</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;">
</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;">
</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;">
</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;">
</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;">
</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;">
</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;">
</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/