переменная изменяется без переназначения в jquery

Question

в jquery коде я заливаю элемент в переменную. Затем нажмите btn4 измените содержимое тега <<strong> 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();

Answer 2

Я точно не знаю, что вы пытаетесь выполнить, но эта строка ниже относится к элементу DOM;

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

Делая $("#d2").append(r);, вы перемещаете элемент r в $("#d2") элемент. Вот почему вы не видите его снова в Div d1.

Answer 3

Я нажимаю btn, чтобы скопировать элемент по предыдущему значению, но переменная также изменилась (присваивается значение 2), тогда как я не переназначаю переменную. Почему? Что я могу сделать, чтобы предотвратить изменение переменной? также после нажатия btn тег p по значению 2 удаляется из div d1, почему?

Это происходит, поскольку вы добавляете существующий узел DOM $("#d1 #p1") к $("#d2") и перемещаете его из место выхода $("#d1") до $("#d2"). Вы можете решить это, сохранив clone узла $("#d1 #p1") и используя его для добавления как:

let r = $("#d1 #p1");
let r2 = r.clone(); // Create a clone of current node with content

$("#btn4").click(function() {
  $("#p1").html(2);
});
$("#btn").click(function() {
  $("#d2").append(r2);
});

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

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