Question

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

摘录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，其中包含多种语言的库including JavaScript。

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

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

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

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

为了更清楚地说明这一点，here is a jsFiddle展示了这种方法（包括逃避的好处）。

以这种方式做事至少有几个好处：

使用模板可以实际编写带有缩进，格式化等的HTML，以使其尽可能可读 - 而不仅仅是“几乎只是将其复制”，如您所说你的问题。您不需要编写一个大字符串，或者使用+连接一堆字符串，或者根本不使用+。
一个好的模板库将为您正确地转义HTML。

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

Answer 2

摘要2 会删除所有动态添加的事件，请参阅代码jsFiddle：

<div id="source">
  <div>item with click event</div>
</div>

<div id="target">
</div>

<script>
  var source = document.getElementById("source");
  var target = document.getElementById("target");
  source.children[0].onclick = alert.bind(null,"test");
  target.innerHTML = source.innerHTML; // onclick event is not copied
</script>

如果您不对已创建的元素使用动态事件，请使用代码段1 ：由于上面提到的“功能”，所以seems to be faster。

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

2 个答案: