dynamic accordion

dynamic accordion

Hello.

My native language is not english, so please be patient and forgive me the violation of our language.

I am new in javascript and jQueryUI. Though it is great stuff, I have difficulties to use it properly. My aim is to program a dynamic accordion. That meens, that javascript will fetch the titles and texts via Ajax/ASP.NET/C# from a database and refill the accordion with these data.

The fetching out of the database works fine, but I fail to update the accordion with this data.

Here is my attempt:
  1. <!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=iso-8859-1" />
        <title>Home</title>
        <link type="text/css" href="../../css/tagamoga-design/jquery-ui-1.8.4.custom.css" rel="stylesheet" />   
        <script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="../../js/jquery-1.4.2-vsdoc.js"></script>
        <script type="text/javascript" src="../../js/jquery-ui-1.8.4.custom.min.js"></script>
        <script type="text/javascript">
        $(function() {
            $("#accordion").accordion({
                autoHeight: false,
                navigation: true
            });       
        });
        function LoadData()
        {
            var Accord = document.getElementById("accordion");
           
            var news = document.createElement("h3");
            var news1 = document.createElement("a");
            news1.setAttribute("href","#News6");
            var news2 = document.createTextNode("My first title");
            var news3 = document.createElement("div");
            var news4 = document.createElement("p");
            var news5 = document.createTextNode("My first text");
           
            Accord.appendChild(news);
            news.appendChild(news1);
            news1.appendChild(news2);
           
            Accord.appendChild(news3);
            news3.appendChild(news4);
            news4.appendChild(news5);
            }
        </script>

    </head>
    <body  onprerender="LoadData()">
        <table style="width:100%;">
            <tr>
                <td width="200px">
                    &nbsp;</td>
                <td>
                    <div id="accordion">
                        <h3><a href="#News1">LoadData</a></h3>
                        <div>
                            <p>Mauris mauris ante, blandit et, ultrices a, susceros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
                        </div>
                  </div>
            </td>
            </tr>
        </table>

    </body>
    </html>























































Can somebody tell me, how to correct this attempt?

Greetings, Taggi