在 Javascript 函数中组织 HTML答案

【问题标题】：organize HTML inside Javascript functions在 Javascript 函数中组织 HTML
【发布时间】：2010-01-04 11:35:59
【问题描述】：

考虑使用 Javascript 函数将 HTML 元素添加到页面。在该函数中，需要指定元素的 HTML 的行。但是如果这个 HTML 很复杂，那么它会让你的代码看起来很难看并且难以调试。考虑下面的例子（注意 ul.innerHTML 之类的）：

function addHTMLField(area,limit) {
        var field_area = document.getElementById(area);
        var all_inputs = field_area.getElementsByTagName("ul");
        var last_item = all_inputs.length - 1;
        var last = all_inputs[last_item].id;
        var count = Number(last.split("_")[1]) + 1;
        if(count > limit && limit > 0) return;
        if(document.createElement) { //WC3 Dom method
            var ul = document.createElement("ul");
            ul.innerHTML = "<ul style='margin-top: 10px' id='blog_"+count+"'><li>Blogname:<br/> <input type='text' name='blog["+count+"][name]' size='40' /></li><li>Blog Title:<br/> <input type='text' name='blog["+count+"][title]' id='blogtext_"+count+"' size='40' /></li><li>Username:<br/> <input type='text' name='blog["+count+"][username]' id='blogcategory_"+count+"' size='40' /></li><li>E-Mail:<br/> <input type='text' name='blog["+count+"][email]' id='blogcategory_"+count+"' size='40' /> <br/><small>A new user will be created if the above email address is not in the database. <br/>The username and password will be mailed to this email address. </small></li><li><input type='button' value='Remove Blog' onclick=\"removeItem('blog_"+count+"')\"> </li></ul>";
            field_area.appendChild(ul);                     
        } else {
            alert('an error occurred in the addLinkField function');
        }
    }

还有比这更好的方法来组织 Javascript 函数中的 HTML 吗？请注意，我无法将所有 HTML 都设置为 Javascript 外部，因为某些字段是动态填写的。

感谢您提供任何见解。

【问题讨论】：

为什么不对所有子节点使用 document.createElement 而不是设置 ul.innerHTML？

标签： javascript html

【解决方案1】：

我认为分离代码和 HTML 非常重要。在 JavaScript 中编辑 HTML 是一项可怕的考验。有一些解决方案可以很好地处理动态变量。

有像这样的 Javascript 模板引擎：PURE。

John Resig（JQuery 的作者）也将a micro-templating engine 放在一起。这些示例展示了一种使用 HTML 代码的好方法，该代码取自页面内的隐藏 div ，我找到了一个近乎完美的解决方案：这样 HTML 就在它所属的位置，但可以由您填写动态的。而且我不是 JQuery 粉丝，但我倾向于盲目地相信，如果像 Resig 这样的人构建它，它也可以。从性能的角度来使用。

【讨论】：

【解决方案2】：

我非常喜欢在浏览器上运行 XML-XSLT，以很好地分离 JS 和 HTML。

但是我们在一年前转向 JSON，PURE 是我们对失去类似分离的回应。

我们正在构建一个完全基于 PURE for HTML 的 Web 应用程序（即将推出测试版）。
清晰的界限使前端开发成为构建和维护的乐趣。

【讨论】：