通过js代码如何实现

通过js代码如何实现
<ul  id="name"></ul>
如何通过js把下面代码添加到ul标签中
<li class="office current">
<div class="header">
<a href="javascript:;" date-src="12.html" class="ue-clear">
<span>系统管理</span> <i class="icon"></i>
</a>
</div>
</li>
上面添加完之后  再在</li>标签结尾 再添加一组呢
<ul class="subnav">
   <li><a href="javascript:;" date-src="info-reg.html">信息录入</a></li>
   <li><a href="javascript:;" date-src="info-mgt.html">信息管理</a></li>
</ul>请问如何添加呢？
添加完后是这样的
<ul  id="name">
<li class="office current">
<div class="header">
<a href="javascript:;" date-src="12.html" class="ue-clear">
<span>系统管理</span> <i class="icon"></i>
</a>
</div>
       <ul class="subnav">
          <li><a href="javascript:;" date-src="info-reg.html">信息录入</a></li>
    <li><a href="javascript:;" date-src="info-mgt.html">信息管理</a></li>
</ul>
</li>
</ul>

解决方案 »

  1.   


    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title> 页面名称 </title>
    </head>
    <body>
    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
    <ul  id="name"></ul>
    <script type="text/javascript">
    $("#name").append('<li class="office current"><div class="header"><a href="javascript:;" date-src="12.html" class="ue-clear"><span>系统管理</span> <i class="icon"></i></a></div></li>');
    $(".office.current").append('<ul class="subnav"><li><a href="javascript:;" date-src="info-reg.html">信息录入</a></li><li><a href="javascript:;" date-src="info-mgt.html">信息管理</a></li></ul>');
    </script>
    </body>
    </html>
      

  2.   

    看这个资料就可以了，看不懂的话还是先去把基础搞好http://www.cnblogs.com/hanxuming/p/5919049.html