Why is jQuery append duplicating my content?

Question

When i use appendBox function below, first time it works fine and the same with removeBox, but second time it doesn't work properly: it duplicates my content.

What is wrong?

function appendBox( id )
{
    $("#listContainer").append("<div id=\"appendbox-"+ id +"\"><a href=\"javascript:removeBox("+ id +");\">remove</a></div>");
 $("#addBox-"+ id ).slideUp();
}
function removeBox( id )
{
    $("#listMyBoxs").append("<div id=\"addBox-"+ id +"\"><a href=\"javascript:appendBox("+ id +");\">tilføj</a></div>");
    $("#appendbox-"+ id ).slideUp();
}

this its my html when i try this test

<div style="height: 200px; border: 1px solid black;">

 <div id="listContainer"></div>

 <div id="listMyBoxs">

  <div id="addBox-1">
   <a href="javascript:appendBox( 1 );">tilføj</a>
  </div>

 </div>

</div>

Answer 1

If you want to move an existing element, try:

$("#appendbox-"+ id ).appendTo('#listMyBoxs');

Using $("<div></div>") or .append("<div></div>") creates a new element.

Answer 2

I would change the way you're doing it. A more typical solution would like this:

<div id="outer">
  <div id="listContainer"></div>
  <div id="listMyBoxes">
    <a href="#">tilføj</a>
  </div>
</div>

with:

#outer { height: 200px; border: 1px solid black; }
#outer a { display: block; }

and

$(function() {
  $("#listContainer a").live("click", function() {
    $(this).slideUp(function() {
      $(this).appendTo("#listMyBoxes").text("remove").slideDown();
    });
    return false;
  });
  $("#listMyBoxes a").live("click", function() {
    $(this).slideUp(function() {
      $(this).appendTo("#listContainer").text("tilføj").slideDown();
    });
    return false;
  });
});

Adjust as required. If you need more complex content than a simple link then you can enclose that in a div and adjust as necessary. The principles are all the same.