如何在附加div内附加div？

Question

I am trying to append an exiting div to another div that gets appended in the page.

So far I've done this, but it misses the timing or perhaps the logic is not right.

$(".signature-container").append( $('#signature-pad'));  

Here is the html that i am using on a regular WordPress page :

<div id="signature-pad" class="signature-pad">
<div class="signature-pad--body">
  <canvas width="664" height="235" style="touch-action: none;"></canvas>
</div>
<div class="signature-pad--footer">
  <div class="description">Sign above</div>

  <div class="signature-pad--actions">
    <div>
      <button type="button" class="button clear" data-action="clear">Clear</button>
      <button type="button" class="button" data-action="change-color">Change color</button>
      <button type="button" class="button" data-action="undo">Undo</button>

    </div>
    <div>
      <button type="button" class="button save" data-action="save-png">Save as PNG</button>
      <button type="button" class="button save" data-action="save-jpg">Save as JPG</button>
      <button type="button" class="button save" data-action="save-svg">Save as SVG</button>
    </div>
  </div>
</div>

the signature container is a ninja form that gets appended to that page.

Answer 1

$(".signature-container").append($('#signature-pad').html());  

Answer 2

Here you go with a solution

$(".signature-container").append($('#signature-pad').clone());

.clone() method will clone the #signature-pad container along with it's content.

Here you go with example solution https://jsfiddle.net/r736a1gn/

 $(".signature-container").append($('#signature-pad').clone()); 

 #signature-pad { border: 1px solid #000; } .signature-container { padding: 10px; border: 1px solid #00f; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="signature-pad"> Test 1 </div> <br/> <div class="signature-container"></div> 

Hope this will help you.

My believe

Problem / issue https://jsfiddle.net/u2qyseo0/ When you are trying to clone & append the HTML , your cloning is happening as #signature-pad is present, but it's not appending as .signature-container ninja form is not rendered into the DOM .

Solution https://jsfiddle.net/u2qyseo0/1/ Let the .signature-container ninja form to render & then append the HTML content to it.

Answer 3

尝试这种方式：

$(document).find(".signature-container").append( $('#signature-pad').clone());