javascript - 变量被更改而无需在 jquery 中重新分配

Question

在jquery代码中，我在变量中倒入一个元素。然后通过单击btn4更改标签<p>的内容。然后我单击btn 按先前值复制元素但变量也改变了(分配给2)，而我没有重新分配变量。为什么？我可以做什么来防止变量发生变化？同样，在点击 btn 标签 p 后，值 2 会从 div d1 中删除，为什么？

let r = $("#d1 #p1");
$("#btn4").click(function() {
  $("#p1").html(2);
});
$("#btn").click(function() {
  $("#d2").append(r);
});

#d1 {
  background-color: red;
  width: 130px;
  height: 130px;
}

#d2 {
  background-color: yellow;
  width: 130px;
  height: 130px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id='btn4'>btn4</button>
<button id='btn'>btn</button>
<div id="d1">
  <p id="p1">1</p>
</div>
<div id="d2"></div>

Answer 1

尝试这样做，只需将 .html() 添加到“r”声明的末尾即可:

let r = $("#d1 #p1").html();