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

如果我像代码段1那样以编程方式创建元素并设置元素属性，而像代码段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

“”+
'' +
//现在设置为innerHTML

代码片段2删除任何动态添加的事件，请参阅代码：

带有单击事件的项目
var source=document.getElementById（“source”）；
var target=document.getElementById（“目标”）；
source.children[0].onclick=alert.bind（null，“test”）；
target.innerHTML=source.innerHTML；//未复制onclick事件

如果您不在创建的元素上使用动态事件，请继续使用代码片段1：由于上面提到的“功能”，它可以解决此问题。

解决此问题的一个非常好的方法（IMO）是使用某种模板库。一个流行的选择是，它有多种语言的库

模板方法包括使用占位符编写HTML，例如

标记：

<!-- 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>

为了更清楚地说明这一点，请演示此方法（包括逃逸的好处）

这样做至少有几个好处：

使用模板可以让您实际编写带有缩进、格式等的HTML，以使其尽可能可读，而不是像您在问题中所说的那样“几乎只是复制”。您不需要编写一个大字符串，也不需要将一堆字符串与

+

连接起来，或者根本不需要使用

+

一个好的模板库将为您正确地转义HTML

---

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

如果你觉得第二种方法“更容易”并且“想使用”它，为什么不直接使用第二种方法呢？它更短，更直观，而且你想这么做！如果您对第二种方法有特别的疑问，提及它们会使这成为一个更有用的问题。例如，设置属性可以（应该）使用（全局）辅助函数来完成，该函数可以在循环中设置一个束<代码>helpers.setAttr（{name:'foo'，className:'bar'，src:someSrcVar}）。jQuery内置了这个选项，例如

$（'这不是真的。只是测试了一下，我可以在使用snippet 2时很好地提取元素。@pure_code.mom你是对的：我曾经处理动态创建的事件，并迅速得出结论，innerHTML根本没有被解析。只有那些事件被删除，请参阅我的更新答案。谢谢你的启发！我补充道答案有两个好处，还有一个JSFIDLE显示而不是说明。我不知道“用javascript编写html”到底是什么意思（对我来说，你用javascript编写html字符串的第二种方法听起来更像这样）；但我不认为我会这样描述它。看看JSFIDLE，告诉我你是否不喜欢这种方法，以及为什么。我很想知道。一般来说，不要混合。不要放标记（html）@pure_code.mom：您可以使用
div
标记，但它会显示出来。然后您需要添加
样式：“display:none；”“
（或使用一些等效方法）确保模板本身不会显示在页面上。使用
脚本
标记只是一种惯例。请注意，
类型
属性设置为“text/html”，而不是“text/javascript”。使用脚本标记不仅仅是一种约定。将脚本标记与类型模板或类似类型一起使用的优点是确保任何具有src属性的内容（图像、iframe）不需要时将不会加载。新模板标记上有一个草稿也会这样做。但是，不向后兼容…脚本标记是。@Rene-标记中的实际文本内容的解析是否也不同？
<!-- 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);