使用javascript创建动态内容的最佳方式？

Question

如果我创建元素并以编程方式设置元素属性是否重要,如在片段1中那样写出innerHTML,就像在片段2中一样？如何使用其中一个答案中建议的模板库？

摘录1

var link_element,
    image_element;

// create image element

image_element = $A.createElement('img');
image_element.className = "bookmark_image";
image_element.name = "bo_im";
image_element.src = bookmark_object.favicon;

// create link element

link_element = $A.createElement('a');
link_element.innerHTML = bookmark_object.title;
link_element.href = bookmark_object.url;
link_element.name = "bookmark_link";
link_element.className = "bookmark_link";
link_element.target = "_blank";

// append now

摘录2

'<img name="bo_im class="bookmark_image" src="' + val.favicon + '">' +
'<a target="_blank" name="bookmark_link" class="bookmark_link" href = "' + val.url + '" id="' + val.id + '">' + val.title + '</a>' +

// set to innerHTML now

Answer 1

解决这个问题的一个非常好的（IMO）解决方案是使用某种模板库。一种流行的选择是Mustache ，它拥有包括 JavaScript 在内的多种语言的库。

\n\n

模板方法包括使用占位符编写 HTML，例如标签<script>：

\n\n

<!-- very simple example -->\n<script id="bookmark-template" type="text/html">\n    <img name="bo_im" class="bookmark_image" src="{{favicon}}">\n    <a target="_blank" name="bookmark_link" class="bookmark_link" href="{{url}}" id="{{id}}">\n        {{title}}\n    </a>\n</script>\n

\n\n

然后，当需要渲染动态内容时，您可以使用模板并提供数​​据来相应地填充它：

\n\n

var template = document.getElementById("bookmark-template").textContent;\nvar html = Mustache.render(template, bookmark_object);\n

\n\n

为了更清楚地说明这一点，这里有一个 jsFiddle演示了这种方法（包括转义的好处）。

\n\n

这样做至少有几个好处：

\n\n

\n
1. 使用模板可以让您实际编写带有缩进、格式等的 HTML\xe2\x80\x94 ，使其尽可能具有可读性\xe2\x80\x94，而不仅仅是“几乎只是将其复制过来”，正如您在问题中所说的那样。您不需要编写一个大字符串，也不需要使用 , 连接一堆字符串+，或者+根本不需要使用 。
\n
2. 一个好的模板库将正确地为您转义 HTML。
\n

\n\n

对我来说，这些好处就足够了。你可能会有不同的感觉。

\n