使用replaceWith后分离或删除，但要切换

Question

点击，用ul li替换div后，当我再次点击按钮时，如何删除，并在每次点击时重复处理？我需要在DOM中保留原始ul li，因此无法追加，需要克隆

＆＃13;

＆＃13;

$("#button").click(function() {
  $("#button").toggleClass("newClass");
  $("div").replaceWith($("ul li"));
  if ($("#button").text() == "ADD UL LI TO DIV") {
    $("#button").text("REMOVE DIV CONTENT");
  } else {
    $("#button").text("ADD UL LI TO DIV");
  }
});

＆＃13;

#button {
  cursor: pointer
}

#button {
  background: red
}

#button.newClass {
  background: green
}

ul {
  display: none
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<span id="button">ADD UL LI TO DIV</span>
<div></div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

function f1() {
  $("ul").clone().appendTo("div");
  $("div ul").css("display", "block");
  $("#button").addClass("newClass").text("REMOVE DIV CONTENT");
  $(this).one("click", f2);
}

function f2() {
  $("div").empty();
  $("#button").removeClass("newClass").text("ADD UL LI TO DIV");
  $(this).one("click", f1);
}
$("#button").one("click", f1);

#button {
  cursor: pointer;
  background: red;
}

#button.newClass {
  background: green
}

ul {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
<span id="button">ADD UL LI TO DIV</span>
<div></div>

我相信这就是你所需要的。