JQuery取内容问题，怎么做啊？？？

以下黑色部分是从从外部调用数据，想建立红色部分结构并隐藏黑色部分，怎么用JQuery实现啊？各位帮忙看看
<div id="gundong">
  <div class="sidebox">
  <h3>内容标题</h3>
  <table>
  <tr>
  <td>第一行文字</td>
  </tr>
  <tr>
  <td>第二行文字</td>
  </tr>
  <tr>
  <td>第三行文字</td>
  </tr>
  <tr>
  <td>第四行文字</td>
  </tr>
  </table>
  </div>  <h3>内容标题</h3>
  <div class="sidebox">
    <ul>
  <li>第一行文字</li>
  <li>第二行文字</li>
  <li>第三行文字</li>
  <li>第四行文字</li>
  </ul>
  </div></div>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
  <style type="text/css">
.sidebox.hidden{display:none}
  </style>
  <script type="text/javascript">
  
  </script>
</head> <body>
  <div id="gundong">
  <div class="sidebox">
  <h3>内容标题<a href="#">显示</a></h3>
  <table>
  <tr>
  <td>第一行文字</td>
  </tr>
  <tr>
  <td>第二行文字</td>
  </tr>
  <tr>
  <td>第三行文字</td>
  </tr>
  <tr>
  <td>第四行文字</td>
  </tr>
  </table>
  </div>
<div class="sidebox hidden">
<h3>内容标题</h3>
<ul>
<li>第一行文字</li>
<li>第二行文字</li>
<li>第三行文字</li>
<li>第四行文字</li>
</ul>
</div></div>
</body>
遍历div id="gundong"中的table tr td,
JQuery动态添加 ul li,
最后$('#gundong').remove();
好像楼上没明白我想要的，我是说，红色部分要用JQUERY创建并将上面的文字复制到红色结构中，我需要这样功能的代码
<script>
    $(function () {
        $(".sidebox").remove();
        $("#gundong").append("<h3>内容标题</h3><div class=\"sidebox\"> <ul>  <li>第一行文字</li>  <li>第二行文字</li>  <li>第三行文字</li> <li>第四行文字</li></ul></div>");    });
</script>
对了，还有html代码，楼主是这个意思吗？
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="gundong">
        <div class="sidebox">
            <h3>
                内容标题</h3>
            <table>
                <tr>
                    <td>
                        第一行文字
                    </td>
                </tr>
                <tr>
                    <td>
                        第二行文字
                    </td>
                </tr>
                <tr>
                    <td>
                        第三行文字
                    </td>
                </tr>
                <tr>
                    <td>
                        第四行文字
                    </td>
                </tr>
            </table>
        </div>
    </div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
    <title>1111</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type='text/javascript'>
$(function(){
$("#gundong").find(".sidebox").hide().end().append("<h3>内容标题</h3><div class=\"sidebox\"><ul><li>第一行文字</li><li>第二行文字</li><li>第三行文字</li><li>第四行文字</li></ul></div>");
});
</script>
</head>
<body>
<div id="gundong">
  <div class="sidebox">
  <h3>内容标题</h3>
  <table>
  <tr>
  <td>第一行文字</td>
  </tr>
  <tr>
  <td>第二行文字</td>
  </tr>
  <tr>
  <td>第三行文字</td>
  </tr>
  <tr>
  <td>第四行文字</td>
  </tr>
  </table>
  </div>
</div>
</body>
</html>
我自己写了一个大家帮看看为什么滚动一下就停了啊。帮找找原因<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字列表无缝向上滚动JavaScript代码</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#gundong").append("<h3>文章标题</h3>");
  var str;
  for(var i = 0; i < 7; i ++){
    str += "<li>" + $(".sidebox > table > tbody > tr > td:eq(" + i + ")").html() + "</li>";
  }
  $(str).appendTo("#demo1 > ul");
});
</script>
<style>
*{margin:0px;padding:0px;border:0px;}
a {
color:#FFF;
text-decoration:none;}
a:hover{
color:#F60;
text-decoration:underline;}
body{font:12px "宋体";}
#demo1{
height:auto;
text-align:left;
}
#demo2{
height:auto;
text-align:left;
}
#demo1  li{
list-style-type:none;
height:40px;
background:url() no-repeat left center;
text-align:left;
text-indent:15px;
}
#demo2  li{
list-style-type:none;
height:40px;
background:url() no-repeat left center;
text-align:left;
text-indent:15px;
}
</style>
</head>
<body>
<div id="gundong">
<div class="sidebox" style="display:none;">
<h3>文章标题</h3>
<table>
<tbody>
<tr>
<td><a href="www.jianghanrenjia.net" target="_blank">第一行文字</a></td>
</tr>
<tr>
<td><a href="www.jianghanrenjia.net" target="_blank">第二行文字</a></td>
</tr>
<tr>
<td><a href="www.jianghanrenjia.net" target="_blank">第三行文字</a></td>
</tr>
<tr>
<td><a href="www.jianghanrenjia.net" target="_blank">第四行文字</a></td>
</tr>
</tbody>
</table>
</div>
<div id="demo" style="overflow:hidden;height:280px;width:280px; background:#000;">
<div id="demo1">
<ul>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
var speed=28 ;
var demo=document.getElementById("demo");
var demo2=document.getElementById("demo2");
var demo1=document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
  demo.scrollTop-=demo1.offsetHeight
else{
  demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文字列表无缝向上滚动JavaScript代码</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
function Marquee()
{
if(demo2.offsetTop-demo.scrollTop<=0)
{
demo.scrollTop-=demo1.offsetHeight;
}
else
{
  demo.scrollTop++;
}
}
var demo,demo1,demo2;
$(document).ready(function(){
  $("#gundong").append("<h3>文章标题</h3>");
  var str;
  for(var i = 0; i < 7; i ++){
    str += "<li>" + $(".sidebox > table > tbody > tr > td:eq(" + i + ")").html() + "</li>";
  }
  $(str).appendTo("#demo1 > ul"); speed=28;
demo=document.getElementById("demo");
demo2=document.getElementById("demo2");
demo1=document.getElementById("demo1");
demo2.innerHTML=demo1.innerHTML MyMar=setInterval("Marquee()",speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval("Marquee()",speed)}
});
</script>
<style>
*{margin:0px;padding:0px;border:0px;}
a {
    color:#FFF;
    text-decoration:none;}
a:hover{
    color:#F60;
    text-decoration:underline;}
body{font:12px "宋体";}
#demo1{
height:auto;
text-align:left;
}
#demo2{
height:auto;
text-align:left;
}
#demo1  li{
list-style-type:none;
height:40px;
background:url() no-repeat left center;
text-align:left;
text-indent:15px;
}
#demo2  li{
list-style-type:none;
height:40px;
background:url() no-repeat left center;
text-align:left;
text-indent:15px;
}
</style>
</head>
<body>
<div id="gundong">
<div class="sidebox" style="display:none;">
<h3>文章标题</h3>
<table>
<tbody>
<tr>
<td><a href="www.jianghanrenjia.net" target="_blank">第一行文字</a></td>
</tr>
<tr>
<td><a href="www.jianghanrenjia.net" target="_blank">第二行文字</a></td>
</tr>
<tr>
<td><a href="www.jianghanrenjia.net" target="_blank">第三行文字</a></td>
</tr>
<tr>
<td><a href="www.jianghanrenjia.net" target="_blank">第四行文字</a></td>
</tr>
</tbody>
</table>
</div>
<div id="demo" style="overflow:hidden;height:280px;width:280px; background:#000;">
<div id="demo1">
<ul>
</ul>
</div>
<div id="demo2"></div>
</div>
</div>
</body>
</html>