append（）不会追加到最后选择的元素中

Question

我遇到了jQuery附加问题。

当我尝试追加一个缓存的项目时，当＆＃34;缓存＆＃34;时，append（）不会在最后选择的元素中追加该项目。按钮按下两次或更多次。

如果在追加调用之前每次都选择了我要追加的项目，

append（）可以正常工作。

var origin = $('#origin').children().clone();
var destiny = $('.destiny');

//Doesn't work well :/
$('#cache').click(function(event) {
  destiny.append(origin);
});

//Works fine
$('#no-cache').click(function(event) {
  var origin = $('#origin').children().clone();
  destiny.append(origin);
});

我做错了什么？提前谢谢。

＆＃13;

＆＃13;

(function() {

  var origin = $('#origin').children().clone();
  var destiny = $('.destiny');

  $('#cache').click(function(event) {
    destiny.append(origin);
  });

  $('#no-cache').click(function(event) {
    var origin = $('#origin').children().clone();
    destiny.append(origin);
  });

  $('#reset').click(function(event) {
    destiny.empty();
  });

})();

＆＃13;

#d1 {
  background-color: red;
}

#d2 {
  background-color: green;
}

#d3 {
  background-color: blue;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="origin">
  <p>
    Hi, I'm a paragraph
  </p>
</div>
<button id="cache">With Cache</button>
<button id="no-cache">Without Cache</button>
<button id="reset">Reset!</button>

<div id="d1" class="destiny">
  <p>Destiny 1</p>
</div>

<div id="d2" class="destiny">
  <p>Destiny 2</p>
</div>

<div id="d3" class="destiny">
  <p>Destiny 3</p>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

只有一个'p'元素，并且有三个'命运'元素。 dom节点只能有一个父节点。如果要将其复制到所有命运元素，则必须多次克隆。

将其更新为无法克隆。

jQuery(function($) {
  var origin = $('#origin');
  var destiny = $('.destiny');
  
  $('#cache').click(function() {
    destiny.append(origin.html());
  });
  
  $('#reset').click(function() {
    destiny.empty();
  });
});

    #d1 {
      background-color: red;
    }

    #d2 {
      background-color: green;
    }

    #d3 {
      background-color: blue;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div id="origin">
      <p>
        Hi, I'm a paragraph
      </p>
    </div>
    <button id="cache">With Cache</button>
    <button id="reset">Reset!</button>

    <div id="d1" class="destiny">
      <p>Destiny 1</p>
    </div>

    <div id="d2" class="destiny">
      <p>Destiny 2</p>
    </div>

    <div id="d3" class="destiny">
      <p>Destiny 3</p>
    </div>

Answer 2

你可能会发现这个有用的

<强> WORKING FIDDLE

(function() {

  var origin = $('#origin').html();
  var destiny = $('.destiny');

  $('#cache').click(function(event) {
    destiny.append(origin);
  });

  $('#no-cache').click(function(event) {
    var origin = $('#origin').children().clone();
    destiny.append(origin);
  });

  $('#reset').click(function(event) {
    destiny.empty();
  });

})();