JQuery & Html: Wie DIV dynamisch mit einem anderen in JQuery?

Question

Ich habe eine xml-Datei wie folgt:

<posts> 
    <post id="123"> 
     <title>UN meets on North Korean missile launch - </title> 
     <link>index2.htm</link> 
    </post> 
    <post id="124"> 
     <title>UN meets on North Korean missile launch - </title> 
     <link>index2.htm</link> 
    </post> 
</posts> 

Ich habe ein div in meiner html Datei mit id='contact' und ich mag Daten von meiner xml Datei zu divs meiner html in extrahieren, so dass ich die <post> wählen Tags aus xml und <link> Tag aus extrahieren und alle paar von ihnen in einer Zeile <div class="line"> so platzieren, wenn dies div s Breite die Seitenbreite entspricht, wird die <div class="line"> schließen, und die verbleibenden <link> s die meisten zu einem neuen <div class="line"> anhängen, die generiert werden.

<div id="container"> 

<div id="top-nav"> 
    <ul> 
     <li><a href="#">Website.com</a></li> 
     <li><a href="#">About Me</a></li> 
     <li><a href="#">News</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Abilities</a></li> 
     <li><a href="#">Ideas</a></li> 
    </ul> 
</div> 

<div id="content"> 
<!-- Content Will Goes Here! --> 
</div> 

<div id="bottom-nav"> 
    <ul> 
     <li><a href="#">Contact</a></li> 
     <li><a href="#">Branches</a></li> 
     <li><a href="#">Jobs</a></li> 
     <li><a href="#">Privacy Policy</a></li> 
     <li><a href="#">Publishs</a></li> 
    </ul> 
</div> 

</div> 

Ich möchte dies wie dies mit JQuery tun:

$(document).ready(function() { 

    $.ajax({ 
     type:"GET", 
     url:"posts.xml", 
     dataType:"xml", 
     success:function(xml){ 

      var line = '<div class="line"></div>'; 
      $(line).appendTo('#content'); 
      $(xml).find('post').each(function(index, element) { 

       var postLink = $(element).find('link').text(); 
       var postFont = $(element).find('font').text(); 

       var Link = ''; 
       Link += '<div class="link '+postFont+'"><a href="'+postLink+'">'; 
       Link += $(element).find('title').text(); 
       Link += '</a></div>'; 

       var lastLine = $('.line')[$('.line').length-1]; 
       var lineHeightBefore = parseInt($(lastLine).css('height')); 
       //alert(lineHeightBefore); 
        console.log(lineHeightBefore); 
       $(Link).appendTo(lastLine); 
       var lineHeightAfter = parseInt($(lastLine).css('height')); 

       if(lineHeightAfter > lineHeightBefore){ 
        $('.link').last().remove(); 
        $(line).appendTo('#content'); 
        lastLine = $('.line')[$('.line').length-1]; 
        $(Link).appendTo(lastLine); 
       } 

      }); 

     } 
    }); 
}); 

aber es funktioniert nicht gut.
Bitte sehen und meine Codes testen, das Problem
dank

Answer 1

zu finden Wenn Sie Inhalte in das DIV setzen wollen.

$ ("# content") .html (- was immer Sie hier wollen-);

ex. $ ("# content") .html ("einige Sachen");