如何克隆 div 和插入按钮一起？答案

【问题标题】：How to clone div and insert button together?如何克隆 div 和插入按钮一起？
【发布时间】：2015-10-08 15:28:36
【问题描述】：

我只想克隆并在这个克隆的右手边插入按钮。

我的 javascript 看起来像这样：

 $('.frame .portlet').click(function (e) {


        if ($(e.target).is(".portlet-content") || $(e.target).is(".portlet-header")) {
            cancel: 'ui-icon-minusthick ui-icon-plusthick';
            var $this = $(this), $error;

            // for duplicate
            if ($this.hasClass('added') && !$this.hasClass('newPortlet')) {
                $error = $this.next('.clone-error');
                if (!$error.length) {
                    $error = $('<span />', {
                        'class': 'clone-error',
                        html: '<div class="alert alert-warning" role="alert" style="width: 300px"> This question is already added!</div>'
                    }).insertAfter(this);
                }
                $error.stop().show().delay(800).hide(1);
            } else if (!$this.hasClass('newPortlet')) {
                $this.addClass('added').clone(document.getElementById(this.id)).addClass('newPortlet').("<button>hi</button>").appendTo('#creation .newFrame');

                $msg = $('<span />', { html: '<div class="alert alert-success" role="alert" style="width: 300px"> This question is added to Add List!</div>' }).insertAfter(this);
                $msg.stop().show().delay(800).hide(1);
                count++;
                add.html("<span id='newExam' class='badge' style='background-color: lightgreen; border-color: green'>" + count + "</span>");
            }

        }
    });

我希望它是这样的：

【问题讨论】：

请向我们提供更多代码 (HTML) 甚至是 jsfiddle 链接，以便我们更好地帮助您；)
我认为你可以很简单地做到这一点，我推荐你，不要混合pure js和jQuery。 jsfiddle 链接会很有用
clone(document.getElementById(this.id) === clone(this)
jsfiddle.net/ppositive/du5eu1t9
我刚刚发布了 jsfiddle 链接，请检查并帮助我@highqweb

标签： javascript jquery html button clone

【解决方案1】：

您可以存储对克隆对象的引用....然后通过附加到该对象来操作该对象。

变化：

$this.addClass('added').clone(document.getElementById(this.id))
      .addClass('newPortlet').appendTo('#creation .newFrame');

收件人：

  // create clone object
  var $clone = $this.addClass('added').clone(this);
  // now can append to clone
  $clone.append('<button>TEST</button>');
  // then insert clone to dom          
  $clone.addClass('newPortlet').appendTo('#creation .newFrame');

通过将对象创建为变量，可以更轻松地阅读和查看各个步骤。我认为您的主要问题是必须在一个链条中执行许多步骤才能使逻辑易于遵循

DEMO

【讨论】：