Question

考虑使用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有比这更好的方法吗？请注意，我无法在Javascript外部创建所有HTML，因为某些字段是动态填充的。

感谢您的任何见解。

Answer 1

我认为分离代码和HTML非常重要。在JavaScript中编辑HTML是一种可怕的折磨。有一些解决方案适用于动态变量。

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

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

Answer 2

我是浏览器上运行的XML-XSLT的忠实粉丝，可以很好地分离JS和HTML。

但是之后我们转向了1年前的JSON，PURE是我们对失去类似分离的回应。

我们正在构建一个完全基于PURE for HTML的网络应用程序（很快就处于测试阶段）。清晰的切割使前端开发成为构建和维护的乐趣。

在Javascript函数中组织HTML

2 个答案: