Geek Answers Handbook

What is the best way to insert a "complex" element on a page from jQuery

I have a button that captures some data from the server using ajax, and when this is done, it should add an element to the DOM.

The item to add will look something like this:

<div class="SomeClass"> <div class="SomeOtherClass"> <span class="Name">name from server</span> <span class="Manufacturer">manufacturer from server</span> </div> <span class="Weight">weight from server</span> </div>'

In my jQuery function, which returns data from the server, how best to create this structure, put the data (name, manufacturer and weight) from the server in the right places and put it in the DOM. It works for me like this:

 $("#ItemList").append('<div class="SomeClass"><div class="SomeOtherClass"><span class="Name">' + value.name + '</span><span class="Manufacturer">' + value.manufacturer + '</span></div> ' + '<span class="Weight">' + value.weight + '</span></div>');

But this does not look very good, and it is difficult to see the correct structure.

What is the best way to do this in its purest form?

+4
source share
6 answers

If I needed several "versions" of the structure, I would add with the addition of something like

 <div class="SomeClass" id='SomeClassTemplate' style='display:none'> <div class="SomeOtherClass"> <span class="Name">name from server</span> <span class="Manufacturer">manufacturer from server</span> </div> <span class="Weight">weight from server</span> </div>

at the bottom of my html body, and then inside my event handler, where the element should be added, I would do

 var newDiv = $("#SomeClassTemplate").clone(); newDiv.attr("id","whatever") // remember this id should be different for each instance. or you can remove it .appendTo("whatever") // depends on where in DOM you want to insert it .find(".name").html("My name"); newDiv.find('.manufacturer').html("my manufacturer); newDiv.show();

The advantage that I found with this approach is that this code can be easily modified by setting selectors in the event of a change in structure.

+13
source

If you want to consider readability, then the following approach will be clean and will not execute unnecessary jQuery queries to add content.

 var div = '<div class="someClass">' + ' <div class="SomeOtherClass">' + ' <span class="Name">' + value.name + '</span>' + ' <span class="Manufacturer">' + value.manufacturer + '</span>' + ' </div>' + ' <span class="Weight">' + value.weight + '</span>' + '</div>'; $('#itemList').append(div);
+4
source

You can use jQuery plugin. But if this is the "best" way, I can not say. Using templates requires more processing time, but the code is more readable. You must weigh your specific task. But keep in mind that it is no longer recommended to be used as the Recommended HTML JavaScript library for jQuery?

+1
source

maybe you can try jQuery templates ?

It is still in beta, but I believe that it is widely used.

(example from the documentation)

 <!DOCTYPE html> <html> <head> <style> table { border-collapse:collapse; margin:8px; background-color:#f8f8f8; } table td { border:1px solid blue; padding:3px; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script> </head> <body> <button id="showBtn">Show movies</button><br/> <table><tbody id="movieList"></tbody></table> <script> var movies = [ { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" }, { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" }, { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" } ]; var markup = "<tr><td colspan='2'>${Name}</td><td>Released: ${ReleaseYear}</td><td>Director: ${Director}</td></tr>" /* Compile markup string as a named template */ $.template( "movieTemplate", markup ); /* Render the named template */ $( "#showBtn" ).click( function() { $( "#movieList" ).empty(); $.tmpl( "movieTemplate", movies ).appendTo( "#movieList" ); }); </script> </body> </html>
0
source

You can use the jQuery template, as DanielB suggested, the code will look cleaner and possibly easier to maintain, but consider adding another script that is in beta mode for your application. Is it worth it?

I work this way if HTML should be dynamic via jQuery or if it is a small piece of code, like <div>Hello</div> , I would use selector.append ().

if it is HTML code, as in your example, I would stick to it on the HTML page as it is.

For me, this is really a question of what you should do with HTML as follows.

For example, I used jQuery templates in an online chat application that I was working on, which actually helped me with the maintenance.

0
source

The way I do is shown below. I'm not sure that u should create so many divs, but it worked very well with me.

 var div1 = $('<div class="colwrap_fof"></div>'); //THE COMPLEX DIV ITSELF var div2 = $('<div class="homeimg"></div>'); var div21 = $('<div id="backImageDiv'+fof_index+'" class="backDiv"></div>'); var div22 = $('<div id="frontImageDiv'+fof_index+'" class="frontDiv"></div>'); div2.append(div21); div2.append(div22); div1.append(div2); $("#df_background").append(div1); // ADDING the complex div to the right place

Greetings

0
source

More articles:


All Articles