jQuery with uncomplete DOM elements

Question

My problem is related to jQuery and the DOM elements. I need a template like the following:

var threadreply = " <li class='replyItem'>"
                + "     <div class='clearfix'>"
                + "         ${tittle}"
                + "     </div>"
                + " </li>"
                ;
$.template( "threadreply", threadreply );

As you can see, this is a list element. My problem is when I parse it with $.tmpl, which retrieves a valid DOM element without the <li> </li> tags.

liElement = liElement + $.tmpl("threadreply", {"tittle": "hello"} ).html();

Is there any way I can retrieve the element without reformatting?

I know I can do it with a template with a valid ul tag and inside an each jQuery template loop, but I'm not working with JSONs, I can't convert my data structures to JSON.

The full example is as follow:

var threadreply = " <li class='replyItem'>"
                + "     <div class='clearfix'>"
                + "         ${tittle}"
                + "     </div>"
                + " </li>"
                ;
$.template( "threadreply", threadreply );

var liElement = "";
for( var i = 0; i < 150; i ++ ){
    liElement = liElement + $.tmpl("threadreply", {"tittle": "hello"} ).html();
}
$(liElement).appendTo("#ULElement");

EDITED

I found a workaround with this thread: JQuery Object to String wich consists on wraping each DOM element returned by the $.tmpl in a div before get the .html() of the object:

liElement = liElement + $('<div>').append( $.tmpl("threadreply", {"tittle": "hello"} )).html();

With 300 elements it takes aprox 290ms in process all elements. With the appendTo() inside the loop, it takes more than 800ms.

Timothy Groote · Accepted Answer · 2011-04-06T15:07:30.650

3

you do not get the 'li' element because when you do

liElement = liElement + $.tmpl("threadreply", {"tittle": "hello"} ).html();

you get the contained html (or innerhtml) of the 'li' element.

html:

<ul id="titleList">
</ul>

js:

$.tmpl("threadreply", {"tittle": "hello"}).appendTo('#titleList');

edited Apr 06 '11 at 15:07

answered Apr 06 '11 at 14:31

Timothy Groote

8,614
26
52

If i do what you say, when i `alert(liElement);` is full of `[object]`. I cant do nothing with them. – Alejandro González Apr 06 '11 at 15:01
you can use jQuery's .appendTo to achieve what you want. i updated the answer for you. – Timothy Groote Apr 06 '11 at 15:08
I know i can do this, but when i have a loop with 150 iterations, i dont want to `appentTo();` directcly to an DOM object. Instead i want to collect all in a variable and then, when the loop finish, append it. Im going to update the question with full code. – Alejandro González Apr 06 '11 at 15:10
you could create a new, empty jQuery element and use appendTo on that, then append your new, now filled jQuery element to your document somewhere. – Timothy Groote Apr 06 '11 at 15:16
i made some test, and thought you cant appentTo in to an empty element. Despite that, in that way you are doing 150 appendTo(); witch takes really much time. – Alejandro González Apr 06 '11 at 15:42
I update the question to include the best workaround i found so far. – Alejandro González Apr 07 '11 at 07:08

Camilo Díaz Repka · Answer 2 · 2011-04-06T16:21:06.917

1

You just need the string and not a real DOM element. Just use:

liElement = liElement + $.tmpl("threadreply", {"tittle": "hello"});

Outside the loop, you need to wrap the HTML you just generated into a new element, and then replace the former li:

$('<li />').html(liElement).replaceAll('li#existingLiID');

edited Apr 06 '11 at 16:21

answered Apr 06 '11 at 14:36

Camilo Díaz Repka

4,805
5
43
68

i cant do nothing with the liElement after the loop, if i dont take the `.html()` – Alejandro González Apr 06 '11 at 15:46
Seems like you need to wrap the HTML you created into a new `li` item, and then replace the former `li`. See my update. – Camilo Díaz Repka Apr 06 '11 at 16:21
Thats still not working. The real problem is that the $.tmpl returns a DOM object and i cant concatenate it to a variable. If y use `.html()` to retrieve the html of the object, its return the innerHtml of the first DOM object, in this case the `li` wich is the `div`. – Alejandro González Apr 07 '11 at 07:01

jQuery with uncomplete DOM elements

2 Answers2