从Ajax Response创建动态UI的方法？

Question

使用Ajax的常见方案是解析响应并为最终用户创建用户界面。我仍然是Ajax和UI的新手，我只看到两个使用Ajax（JSON / XML）响应创建UI的选择，

1. CreateElement（）方式并继续动态添加/删除元素
2. 创建大字符串并设置某个元素的innerHTML

现在我有以下问题：

1. 如果还有其他更好的选择，请让我知道吗？

2. 如果我想将事件附加到动态创建的元素，那么更好的方法是什么？我的意思是在很多情况下我最终做了像

   这样的事情

   ＆lt; input onclick =“somefunction（）”/＆gt;

我真的感觉不好，确实会引起问题和头痛。

Answer 1

尝试使用现有的Javascript UI框架，如YUI，JQuery甚至GWT。 在XHR请求的情况下，这将为您提供真正好的选择和灵活性。 您也可以在UI框架中了解事件管理 - 一旦您了解了这个想法，您也可以在没有这些框架的情况下使用它 - 在Google中查看HTML中的事件

Answer 2

我没有看到这两种方法有什么问题。但是从性能的角度来看，设置innerHTML更好。 在某些情况下，动态创建元素是唯一的选择，您可能需要查看documentFragment以避免大量重排（再次出于性能原因）。

ECMA指定addEventListener以动态地向元素添加侦听器。您还可以阅读有关事件冒泡的信息。