Question

我试图将一个exiting div附加到另一个附加在页面中的div。

到目前为止，我已经完成了这项工作，但它错过了时机，或者逻辑错误。

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

这是我在常规WordPress页面上使用的html：

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

签名容器是一个忍者形式，会附加到该页面。

Answer 1

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

Answer 2

您可以使用解决方案

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

.clone()方法将克隆#signature-pad容器及其内容。

您可以使用示例解决方案https://jsfiddle.net/r736a1gn/

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

希望这会对你有所帮助。

我相信

问题/问题https://jsfiddle.net/u2qyseo0/   当你试图克隆＆amp;附加HTML，您的克隆正在#signature-pad出现，但由于.signature-container ninja形式没有附加到DOM。

解决方案https://jsfiddle.net/u2qyseo0/1/   让.signature-container忍者形式呈现＆amp;然后将HTML内容附加到其中。

Answer 3

尝试这种方式：

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

如何将div添加到附加的div中？

3 个答案: