html模板与通过js推送代码

Question

Say I want to render some html dynamically. Which is better?(apart from it gives good structure to code)

<script type="text/template" id="some">
//some html code here
</script>
_.template($("#someid").html());

or

$("#someid").html("inserting html here");

Answer 1

In both the approaches that you've mentioned, the HTML markup is generated as HTML string and then added to the target DOM element. So, the way I see it there is no performance benefit of using one over the other.

• Having said that, using templates (underscore) in your case, the code just becomes more manageable than having to generate long HTML strings by concatenating various values together.

• Also, compiled templates with conditional statements can be stored in a variable and reused by making a single call to the template (and passing an object to it). Whereas, if you need to populate HTML string then in that case you'll end up writing a string concatenation statement inside a for loop or its functional programming equivalent $.each or _.each to make it reusable.

Here are 2 fiddles that essentially do the same thing using the 2 said approaches:

Using Templates

Using string concatenation

Compare the code and decide for yourself what best suits your requirement.

Answer 2

I would use an invisible div rather than html code in script tag so google could index it.

Also I would use .clone() method to clone DOM structure instead of retrieving plain text html ( .html() ) and creating new element based on this. But it would be a bit more tricky to change values in the template - still it might be quicker; haven't tested.