Wie anhängen div innerhalb angehängt div?

Question

Ich versuche, ein vorhandenes Div an ein anderes Div anzuhängen, das auf der Seite angehängt wird.

Bisher habe ich das gemacht, aber es fehlt das Timing oder vielleicht ist die Logik nicht richtig.

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

Hier ist der HTML, die ich auf einer regelmäßigen Wordpress Seite bin mit:

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

die Signaturcontainer ist ein Ninja Form, die auf dieser Seite angehängt wird.

Answer 1

auf diese Weise versuchen:

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

Answer 2

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

Answer 3

Hier gehen Sie mit einer Lösung

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

.clone() Methode, um die #signature-pad Container klonen wird zusammen mit seinem Inhalt.

Hier gehen Sie mit Beispiellösung 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 Ihnen helfen.

Meine glauben

Problem/Ausgabe https://jsfiddle.net/u2qyseo0/ Wenn Sie & hängen Sie die HTML, Ihre Klonen geschieht wie #signature-pad vorhanden ist, zu klonen versuchen, aber es ist das Anhängen nicht als .signature-container ninja Form nicht wiedergegeben wird in die DOM.

Lösung https://jsfiddle.net/u2qyseo0/1/ Lassen Sie die .signature-container ninja Form & zu machen, um dann zu den HTML Inhalt anhängen.