javascript - 在 Javascript 函数中组织 HTML

Question

考虑一个将 HTML 元素添加到页面的 Javascript 函数。在该函数中，需要一行指定元素的 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 之外，因为某些字段是动态填充的。

感谢任何见解。

Answer 1

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

有像这样的 Javascript 模板引擎:PURE .

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