Cloning not working

I have an html DOM similar to the one below.  The <script> section has code and the <table> section has table data.  I try to clone the <div> section item, render it as html, operate on the raw string and re-insert the element between item 1 and 2.  Here's some sample code of what I'm doing:

var $newItemThree = $('div.my-div:eq(1)').clone(true).html().Replace("do some operations");

alert($newItemThree);

$('div.my-div:eq(0)).append($newItemThree);


Now, the alert displays the proper script and table elements, but is missing the outer div (missing <div class=my-div">).  After the append() call, the rendered DOM object is missing the <script> information as well as the outer div.

What gives?  I've even tried .clone() (without true) and it still doesn't work.

FYI, I HAVE to convert to html() in order to do some manual string manipulation to data.  So that has to stay there.

**********  ORIGINAL ************

<div class="my-div">
     <script>...</script>
     <table>...</table>
</div>
<div class="my-div">
     <script>...</script>
     <table>...</table>
</div>
<div class="my-div">
     <script>...</script>
     <table>...</table>
</div>

*****************  AFTER CLONE & INSERT ************

<div class="my-div">
     <script>...</script>
     <table>...</table>
</div>
<table>...</table>
<div class="my-div">
     <script>...</script>
     <table>...</table>
</div>
<div class="my-div">
     <script>...</script>
     <table>...</table>
</div>

Select allOpen in new window