createElement with jQuery etc

[intellix]

Hey guys, I have a UL element, which contains aload of X co-ordinates like so:

 

<div id="xCoords">
  <ul style="left:100px;">
     <li>1<li>
     <li>2<li>
     <li>3<li>
  </ul>
</div>

 

When something is loaded using JSON I need to replace the list containing new numbers and it needs to be quick. It works great at the moment but the problem is that in IE6/7 it works a little differently and the CSS is causing it to display funny because of the way it's being added.

 

I'm creating an elements and then using jQuery to put it in there like so:

 

// Create UL element
var $ul_node_x = document.createElement('ul');
for (loop){
     // Create LI element
     var $x_li = document.createElement('li');
     // Add LI element to UL
     $ul_node_x.appendChild($x_li);
}
$("#xCoords ul").html($ul_node_x);

 

What's happening is, inside IE6/7 its creating something like the code below where an extra UL is added (because I'm creating a UL element with LIs and putting it inside the first UL:

 

<div id="xCoords">
  <ul style="left:100px;">
    <ul>      <!-- EXTRA UL IS ADDED -->
     <li>1<li>
     <li>2<li>
     <li>3<li>
     </ul>
  </ul>
</div>

 

I wanted to sort of create aload of LI elements, but I think you need to create a container to put them all in, that's why I have the UL... The way I'm looking at it, I'm guessing I need to delete the first UL and put it in the <Div> container...

 

I'm not removing all the LI elements and then appending them because I wanted the loop to finish first and then instantly place the new list to make it appear as though there's no lag...

 

Thanks guys

 

[trq]

You don't need to create a new ul considering its already there. Just replace your <li>'s with the new data.

 

ps: Your can use var li = $('<li></li>'); to create a new li element in jQuery.

[intellix]

Aye but I wanted it to happen all at once so however long the loop took, it all happened at once so it queues them all up and then when its finished loading them it goes in at once using html();

 

I did originally have $("<li></li>"); but I read somewhere that it's slower than the raw JavaScript createElement method, so wanted to make it as quick as possible and happen at once... probably not much difference in speed but wanted to have it perform as best possible

[trq]

Aye but I wanted it to happen all at once so however long the loop took, it all happened at once so it queues them all up and then when its finished loading them it goes in at once using html();

 

So create one big string of <li>'s using concatenation and then add them using html().

[intellix]

I guess I'll do that, just wanted to know what the quickest method is really. Thought it would have been to createElement... maybe i'll do that and remove the UL (probably quicker?) lets see