jQuery用户界面：加载HTML标记的最佳方式？

Question

什么是加载HTML标记自定义jQuery的用户界面插件的最佳方式？

到目前为止，我已经看到元件简单地使用字符串创建（即$(...).wrap('<div></div>')），其是用于细一些简单。然而，这使得很难在以后修改为更复杂的元件。

这似乎是一个相当普遍的问题，但我也知道了jQuery UI库是新的不够，有可能不是这一个被广泛接受的解决方案。任何想法？

Answer 1

东西这是相当整齐做是这样的：

var newDiv = $("<div></div>"); //Create a new element and save a reference
newDiv.attr("id","someid").appendTo("body");

这样一来，要创建的元素，并且存储其在可变参考，以供以后使用。

Answer 2

如果您有大量复杂的HTML，而不想以应对你的JavaScript代码硬编码字符串，你可以把它放在一个单独的HTML文件，并使用的 Ajax的负载功能。

这是可链接的，所以你可以加载HTML文件（整个事情，或选定的片段），其注入到当前的DOM，并继续走对的。

Answer 3

一种非常复杂的模板，很多时候，我会只存储的HTML代码中供以后访问JSON对象的字符串...例如：

var temp = {
  header : "<div class='foo'><h3>{HEADER}</h3></div>",
  content : "<div class='bar'><p>{COPY}</p></div>"
}

然后就是对这些进行一些替代的东西的时候回来。这样的标记是从加载数据的逻辑有些分离，从而换出模板等可以稍微更快。

var text = "I am the header text";
var head = new String(temp.header);
$(target).append(head.replace("{HEADER}",text));

无论如何，这种做法一直运作良好，我与AJAX部件和诸如此类的事情，那里是一个可能性，即设计可能从根本上改变各地。

Answer 4

有一个流行的，有效的方法是输出所有附加的标记（无论你以后可能需要）在脚本标记您的页面的底部，使标记不被浏览器渲染。

<script type="text/template" id="template-example">
    <!-- All of your markup here -->
    <% // do some JavaScript in here... %>
    <%= echo_this_variable %>
</script>

您可以使用，然后抓住你的标记jQuery的...

var markup = $('#template-example').html();

和解析那些JS例子我扔在那里使用模板引擎，如一个在 Underscore.js （我推荐），或在此答案jQuery的那些中的一种： jQuery的模板引擎

玩得开心！