时间戳

首页 > 解决方案 > jquery动态添加带有嵌套div的元素

jquery - jquery动态添加带有嵌套div的元素

问题描述

我正在尝试动态添加具有可拖动和可调整大小属性的 HTML 元素。HTML 本身应如下所示：

<div id="draggable" class="ui-widget-content draggable">
<div class="resizable"><img src="example.svg" alt="Example"></div>
<div class="drag-bottom">Example</div>
</div>

如果我只是使用带有一些样式和文本的 div，我可以让它在功能上正常工作（单击按钮以动态创建新元素）：

<body>
  <div id="containment-wrapper">
    <input type="button" id="exampleID" value="3500" />
  </div>
</body>

$(document).ready(function () {
  // CREATE MORE examples
  $("#exampleID").click(function () {
    var dynamic_div = $(document.createElement("div")).css({
      id: "draggable",
      class: "ui-widget-content draggable"
    });

    $(dynamic_div).append("Example text");
    // APPEND THE NEWLY CREATED DIV TO "containment-wrapper".
    $(dynamic_div).appendTo("#containment-wrapper").draggable().resizable();
  });
});

我该如何做到这一点，以便它添加带有我的嵌套 div 和图像和样式的元素？

标签： jquery

解决方案

推荐阅读